JQuery选择器、过滤器大整理

经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了。所有代码均经过测试。

首先HTML代码

复制代码 代码如下:


HTML Code

<html>
<head>
<script type="text/javascript" src="https://www.jb51.net/JQuery/jquery-1.5.1.js"></script>
</head>
<body>
<form action="" method="post">

<table>
    <tr>
      <td nowrap>
      <input type="text" value="text11"/>
      <input type="button" value="button11"/>
      </td>
      <td>
      <input type="text" value="text12"/>
      <input type="hidden" value="hidden12"/>
      </td>
      <td>
      <input type="text" value="text13"/>
      </td>
    </tr>
    <tr>
      <td>
      <input type="password" value="password21"/>
      <input type="radio" value="radio21" checked/>
      <input type="checkbox" value="checkbox21" checked/>
      </td>
      <td nowrap>
      <input type="submit" value="submit22"/>
      <input type="image" value="image22"/>
      <input type="reset" value="reset22"/>
      </td>
      <td>
      <input type="file" value="file23"/>
      </td>
    </tr>
    <tr>
      <td>

<select size="1">
    <option value="select311">option1</option>
    <option value="select312" selected>option2</option>
    <option value="select313">option3</option>
  </select>

</td>
      <td></td>
      <td></td>
    </tr>
  </table>
</form>
<h1>你好世界!</h1>
</body>
</html>

JS代码

1.DOM对象与JQuery包装集

1.通过document.getElementById(),document.getElementsByName()等取的就是DOM对象或DOM对象集,前者取的是对象,后者取得DOM对象集

复制代码 代码如下:


var text11_dom=document.getElementById("text11");
var text11_dom=document.getElementsByName("text11")[0];
var text11_dom=document.all.text11;//此处text11即可以是name值也可以是id值
var text11_dom=document.all[10];


2.如果要使用JQuery提供的函数首先要构造JQuery包装集,通过$()返回的即是JQuery包装集。

复制代码 代码如下:


var text11_jquery=$("#text11");

2.JQuery包装集与DOM对象互相转换

1.DOM对象不能使用JQuery属性方法,但DOM对象可以通过$()转换成JQuery包装集

复制代码 代码如下:


var text11_dom=document.getElementById("text11");
var text11_jquery=$(text11_dom);


2.JQuery包装集可以使用部分DOM对象的属性方法如.length,但也有个别属性方法不能使用如.value,可以通过在JQuery包装集后面加中括号及索引值获取对应DOM对象

复制代码 代码如下:


var text11_dom=$("#text11")[0];


3.在each循环时或触发事件时的this也是DOM对象

复制代码 代码如下:


$("#text11").click(function(){
    var text11_dom_value=this.value;
    alert(text11_dom_value);
});

3.$符号在JQuery中代表对JQuery对象的引用,JQuery的核心方法有四个

1.jQuery(html[,ownerDocument]):根据HTML原始字符串动态创建Dom元素

复制代码 代码如下:


$("<div><p>Hello!</p></div>").appendTo("body");


2.jQuery( elements ):将一个或多个Dom对象封装为jQuery包装集,就是上面的DOM对象与JQuery包装集转换

3.jQuery( callback ):$(document).ready()的简写方式

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgjywd.html