jQuery核心
jQuery
1、核心
1、each()
- 以每个匹配的元素作为上下文来执行一个函数。 换句话说，就是循环。
基本用法
$('img').each(function(index,element) {
this.src = "test" + index + element; //this指的是DOM对象
$(this).prop("hidden", true); //$(this)指的是jQuery对象
return true;//继续循环
return false;//跳过循环
})
2、length
返回选择器选择的元素的个数。
3、get(index)
取得其中一个匹配的元素，返回DOM对象，类似的eq(index) 不过eq返回的是jQuery对象。
$(this).get(0) === $(this)[0]
4、data([key], [value])
1、向DOM对象中存取元素
<div></div>
-
存取普通数据
$('div').data("hello"); //undefinded $('div').data("hello", "lilei"); //lilei $('div').data("hello"); //lilei $('div').data("hello",11); //设置hello值为11 $('div').removeData("hello"); //移除数据 $('div').data("hello"); //undefinded -
存取键值对数据
$('div').data('entry', {name : 'name', age : 12}); $('div').data('entry').name; //===>name
2、H5规范读取预存的data-[key]
<div data-obj="hello">
</div>
4、jQuery.fn.extend(obj)
扩展jQuery方法。(通常用于新增插件)
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
2、选择器
1、select1,select2,selectN
将每一个选择器匹配到的元素合并到一起返回。
$('div,span,p.myclass,p#2')
2、祖先 后代
匹配指定祖先的所有后代元素（包括子元素以及孙子等）。
$('form input')
3、祖先 儿子
匹配指定祖先的子元素，仅限儿子。
$('form > input')
4、前面 紧跟的
匹配所有紧跟前面元素的紧跟元素。
$('label + input')
5、自己 同辈
匹配自己之后的所有同辈元素。
$('form ~ input')
6、:first
匹配第一个元素。
$('input:first')
7、:not(selector)
去除所有与给定选择器匹配的元素。
$('input:not(:checked)')
8、:eq(index)
匹配一个给定索引值的元素。
$('option:eq(1)')
9、:gt(index)
匹配一个大于给定索引值的元素。
$('option:gt(1)')
10、:last()
匹配最后一个元素。
$('option:last')
11、:lt(index)
匹配一个小于索引值的元素。
$('option:lt(1)')
12、:header
匹配h1、h2、h3标题元素。
13、:root
选择文档的根元素。
$(':root').css('background-color','red')
14、:contains(text)
匹配包含给定文本的元素。
$('label:contains("s")')
15、:empty
匹配不包含子元素和文本的空元素。
$('span:empty')
16、:parent
匹配含有子元素或者文本的元素。
$('p:parent')
17、[attribute=value]
匹配给定属性是某个特定值的元素。
$("input[name='222']")
18、[attribute!=value]
匹配不是某个特定值的元素。
19、[attribute^=value]
匹配某个属性是以某些值开始的元素。
$("input[name^='hh']")
20、[attribute$=value]
匹配以某些值结尾的元素。
21、[attribute*=value]
匹配包含某些值的元素。
21、[select1] [select2] [select3]
复合属性选择器，满足框内的多个条件。
<form>
<input id="in1" name="input1">
<input name="input2">
<input>
</form>
<script>
//找出form的子元素中，含有id属性元素，以及name以i开头
$("form > input[id][name^='i']").val('dsfsdfsdf')
</script>
22、:first-child
选择第一个元素的第一个孩子元素。
可匹配多个元素，因为每个父级元素都可匹配它的子元素。
23、:last-child
匹配最后一个元素的孩子元素。
24、:nth-child(n/even/odd/表达式)
匹配给定元素的第几个子元素。（下标从1开始，而eq(index)index从0开始）
<ul>
<li>Curry</li>
<li>KD</li>
<li>James</li>
</ul>
<ul>
<li>Harden</li>
<li>K</li>
<li>Irving</li>
</ul>
<script>
$('ul li:nth-child(2)')
</script>
25、nth-last-child(n/even/odd/表达式)
倒序匹配子元素，同上。
26、:input
匹配所有输入元素，包括input,textarea,select,button
27、:text
匹配所有单行文本框
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
$(":text")
输出[ <input type="text" /> ]
28、:password
匹配所有密码框
<input type="password"/>
浙公网安备 33010602011771号