一 :jquery优点
代码简练 实现的功能多
免费 开源
兼容各种浏览器
能和css html ajax 实现动态效果 。动画 事件等
文档详细
jQuery有错误提示
使用jQuery就不用在js当中插入大量的js代码
二: jquery的开发步骤:
(1)导入js库 放在一个js文件夹下。
(2)在当前的页面上通过<script src="" > 将js文件引入当前的页面。
(3)使用jquery当中的内容。
三: jquery的选择器
基本选择器
#id 查找ID为“myDiv”的元素 $("#myDiv");
element 查找一个DIV元素 $("div");
.class 查找所有类是“myClass”的元素 $(".class");
* 查找每一个元素 $("*");
selector1,selector2,selector3 找到匹配任意一个类的元素 $("div,span,p");
层级选择器
ancestor descendant 在给定的祖先元素下匹配所有的后代元素 找到表单所有的input元素 $("form input");
parent>child 在给定的父元素下匹配所有的子元素 匹配表单中所有的子级input元素 $("form>input");
prev+next 匹配所有紧接在prev元素的next元素 匹配所有跟在label后面的input元素 $("label+input");
prev~siblings 匹配prev元素之后的所有siblings元素 找到所有与表单同辈的input元素 $("form~input");
基本选择器
first() 获取匹配的第一个元素 $("li").first()
last() 获取匹配的最后一个元素 $("li").last()
:not 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
:even 匹配所有索引值为偶数的元素 从0开始计数 查找表格的1 3 5...行(即索引值0 2 4) $("tr:even")
:odd 匹配所有索引值为奇数的元素 从0开始计数 查找表格的2 4 6...行 (即索引值1 3 5 )$("tr:odd:")
:eq 匹配一个给定索引值的元素 查找第二行 $("tr:eq(1)");
:gt 匹配所有大于给定索引值的元素 查找第二行第三行 即索引值是1和2 也就是比0大 $(tr:gt(0))
:lt 匹配所有小于给定索引值的元素 查找第一行第二行 即索引值是0和1 也就是比2小 $(tr:lt(2))
:header 匹配如 h1,h2,h3 之类的标题元素 给页面所有标题加上背景色 $(":header").css("background","#eee");
:animated 匹配所有正在执行动画效果的元素
内容选择器
:contains 匹配包含给定文本的元素 查找所有包含“john”的div元素 $("div:contains('john')")
:empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素 $("td:empty")
:has 匹配含有选择器所匹配的元素的元素 给所有包含p元素的div元素加一个text类 $("div:has(p)").addClass("text")
:parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的td元素 $("td:parent")
可见性选择器
:hidden 匹配所有不可见元素 或者type为hidden的元素 查找隐藏的tr $("tr:hidden")
:visible 匹配所有的可见元素 $("tr:visible")
属性选择器
[attribute] 匹配包含给定属性的元素 查找所有含有id属性的div元素 $("div[id]")
[attribute=value] 匹配给定的属性是某个特定值的元素 查找所有name属性是new的input元素 $("input[name='new']")
[attribute!=value] 匹配所有不含有指定的属性 查找所有name属性不是new的input元素 $("input[name!='new']")
[attribute^=value] 匹配给定的属性是以某些值开始的元素 查找所有name以‘n’开始的input元素 $("input[name^='n']")
[attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有name以‘let’结尾的input元素 $("input[name$='let']")
[attribute*=value] 匹配给定的属性是以包含某些值的元素 查找所有name包含‘man’的input元素 $("input[name*='man']")
[selector1] [selector1] [selectorN] 复合属性选择器 需要同时满足多个条件使用
查找所有含有id属性 并且它的name属性是以man结尾的 $("input[id][name$='man']")
子元素选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素 在每个ul查找第2个li $("ul li:nth-child(2)")
:first-child 匹配第一个子元素 在每个ul中查找第一个li $("ul li:first-child()")
:last-child 匹配最后一个子元素 在每个ul中查找最后一个li $(ul li:last-child)
:only-child 如果某个元素是父元素中唯一的子元素 那么将会匹配 在ul中查找是唯一子元素的li $("ul li:only-child")
表单选择器
: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 $("tr:hidden") 匹配type为hidden的元素 $("input:hidden")
表单对象属性
:enabled 匹配所有可用元素 查找所有可用的input元素 $("input:enabled")
:disabled 匹配所有不可用元素 查找所有不可用的input元素 $(”input:disabled“)
:checked 匹配所有选中的被选择中元素(复选框,单选框等)查找所有选中的复选框元素 $("input:checked")
:selected 匹配所有选择中的option元素 查找所有选中的选项元素 $(select option:selected)