一、什么是jq
jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。二、为什么要用jq
1、简化了js的复杂操作2、无需在去关心兼容性问题(最爽的一点)
3、提供了大量的使用方法
三、jq的选择器
1、基本选择器
#id:通过元素的 id 属性中给定的值$("#myDiv");
element :指向 DOM 节点的标签名$("div");
.class 一个元素可以有多个类,只要有一个符合就能被匹配$(".myClass");
* 匹配所有元素,多用于结合上下文来搜索$("*")
2、简单过滤选择器
:first获取第一个元素 $('li:first');:last() 获取最后个元素
$('li:last')
:not(selector) 去除所有与给定选择器匹配的元素
$("input:not(:checked)")
:even 匹配所有索引值为偶数的元素,从 0 开始计数
$("tr:even")
:odd 匹配所有索引值为奇数的元素,从 0 开始计数
$("tr:odd")
:eq(index) 匹配一个给定索引值的元素
$("tr:eq(1)")
:gt(index) 匹配所有大于给定索引值的元素
$("tr:gt(0)")
:lt(index) 匹配所有小于给定索引值的元素
$("tr:lt(2)")
:header匹配如 h1, h2, h3之类的标题元素 $(":header").css("background", "#EEE");
3、内容过滤选择器
:contains(text)匹配包含给定文本的元素 $("div:contains('John')"):empty 匹配所有不包含子元素或者文本的空元素 $("td:empty")
:has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test");
:parent匹配含有子元素或者文本的元素
$("td:parent")
4、 可见性过滤选择器
:hidden匹配所有不可见元素,或者type为hidden的元素 $("tr:hidden"):visible 匹配所有的可见元素 $("tr:visible")
5、属性过滤选择器
[attribute]匹配包含给定属性的元素。$("div[id]")[attribute=value] 匹配给定的属性是某个特定值的元素
$("input[name='newsletter']").attr("checked", true);
[attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。$("input[name!='newsletter']").attr("checked",true);
[attribute^=value] 匹配给定的属性是以某些值开始的元素 $("input[name^='news']")
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
$("input[name$='letter']")
[attribute*=value] 匹配给定的属性是以包含某些值的元素
$("input[name*='man']")
6、子元素过滤选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素 $("ul li:nth-child(2)"):first-child 匹配第一个子元素
$("ul li:first-child")
:last-child 匹配最后一个子元素
$("ul li:last-child")
:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配$("ul li:only-child")
7、表单对象属性过滤选择器
:enabled匹配所有可用元素$("input:enabled"):disabled匹配所有不可用元素$("input:disabled")
:checked匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
$("input:checked")
:selected匹配所有选中的option元素 $("select option:selected")
8、表单选择器
:input匹配所有 input, textarea, select 和 button 元素$(":input"):text匹配所有的单行文本框
$(":text")
:password匹配所有密码框
$(":password")
:radio匹配所有单选按钮$(":radio")
:checkbox匹配所有复选框$(":checkbox")
:submit匹配所有提交按钮$(":submit")
:image匹配所有图像域$(":image")
:reset匹配所有重置按钮$(":reset")
:button匹配所有按钮$(":button")
:file匹配所有文件域$(":file")
:hidden匹配所有不可见元素,或者type为hidden的元素$("tr:hidden")
突然想起一句话作为文章总结吧:“当你有把锤子的时候,你看什么都像钉子”。
如果觉得这文章也算用心,请劳驾点下赞!!!