经过一晚上的查找整理,终于整理出一套应该算最全面的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()的简写方式
复制代码 代码如下: