jQuery选择器及事件
来源:互联网 发布:知乎周刊如何在kindle 编辑:程序博客网 时间:2024/06/16 16:46
选择器
一、基本选择器
对于了解css的前端新成员来说,基本选择器就像css选择器一样,如现在有一个div,class名为aaa:
<div class=“aaa”>A</div>
我们可以通过jQuery获取这个元素
<scrept> $(“.aaa”).css(“color”,”red”); //$(“.aaa”)就是我们获取的div块</script>
同样jQuery也支持id选择器、元素选择器、全选择器(*)和多个选择器合并的基础选择器
二、属性选择器
1.[attribute] 属性选择器
匹配包含给定属性的元素,用于判断拥有某个属性的元素
2.[attribute=value] 属性选择器
匹配给定的属性的值是value的元素
3.[attribute!=value] 属性选择器
匹配给定的属性的值不等于value的元素
4.[attribute^=value] 属性选择器
匹配给定的属性的值是以value开头的元素
5.[attribute$=value] 属性选择器
匹配给定的属性的值是以value结尾的元素
6.[attribute*=value] 属性选择器
匹配给定的属性的值包含value的元素
7.[selector1][selector2][selectorN] 多个属性选择器
复合属性选择器,需要同时满足多个条件时使用,多个属性值取交集
示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <style type="text/css"> .back{ background-color: #1a71a8; } </style></head><body><!--<div class="div1">A</div>--><input type="text"tabindex="1" name="username" id="user-one"><input type="text"tabindex="2" name="password" id="user-two"><input type="text"tabindex="3" name="location" id="user-three"><input type="text"tabindex="4" name="sex" id="user-four"><script type="application/javascript"> $(function () { $("input[name='username']").css("background-color","#c6c6c6"); $("input[name='password']").addClass("back"); $("input[name*='l']").addClass("back");$("input[id$='two']").addClass("back"); });</script></body></html>
三、基础过滤器
1.$(“div:first”)选取所有div元素中的第一个div元素
2.$(“div:last”)选取所有div元素中的最后一个div元素
3.$(“input:not(.myClass)”)选取class不是myClass的input元素
4..$(“input:even”)选取索引是偶数的input元素
5.$(“input:odd”)选取索引是奇数的input元素
6.$(“input:eq(1)”)选取索引等于1的input元素
7.$(“input:gt(1)”)选取索引大于1的input元素(注:大于1,而不包括1)
8.$(“input:lt(1)”)选取索引小于1的input元素(注:小于1,而不包括1)
9.$(“:header”)选取网页中所有的h1、h2…
10.$(“div:animated”)选取正在执行动画的div元素
示例:
<html lang="en"><head> <meta charset="UTF-8"> <title>过滤器</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <style type="text/css"> .back{ background-color: #e99494; } div{ width: 100px; height: 100px; background-color: #70bfef; } </style></head><body><div ></div><div class="tagbug"></div><div></div><script type="application/javascript"> $(function () { var animaIt=function () { $(".tagbug").fadeToggle("slow"); } });</script></body></html>
四、内容过滤性选择器
1.$(“div:contains(‘我’)”)选取含有文本’我’的div元素
2.$(“div:empty”)选取不包含子元素(包括文本元素)的div空元素
3.$(“div:has(p)”)选取含有p元素的div元素
4.$(“div:parent”)选取拥有子元素(包含文本元素)的div元素
五、可见性过滤器
1..$(“:hidden”)选取所有不可见的元素
六、属性过滤选择器
1.$(“div[id]”)选取拥有属性id的元素
2.$(“div[title=test]”)选取属性title为”test”的div元素
3..$(“div[title!=test]”)选取属性title不等于”test”的div元素(注意:没有属性title的div元素也会被选取)
4..$(“div[title^test]”)选取属性title以”test”开始的div元素
5.
6..$(“div[title*=test]”)选取属性title含有”test”的div元素
7..
七、子元素过滤选择器
1.:nth-child(index/even/odd)选取每个父元素下的第index个子元素或者奇偶元素 :eq(index)只匹配一个元素,并且是总0算起的,而:nth-child将为每一个父元素匹 配子元素,并且:nth-child(index)的index是从1开始的。
2.:first-child只返回单个元素,而:first-child选择符将为每个父元素匹配第一个元素 例如$(“ul li:first-child”);选取每个ul中的第一个li元素
3.:last-child选取每个父元素的最后一个子元素,同样:last返回单个元素,而:last-child 选择符将为每个父元素匹配最后一个子元素 例如$(“ul li:last-child”)选择每个ul中的最后一个li元素
4.:only-child如果某个元素师它父元素中唯一的子元素,那么它将会被匹配,如果父元素中含有 其它元素,则不会被匹配。
例如:$(“ul li:only-child”)在ul中选取是唯一子元素的li元素 :nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:
:nth-child(even)能选取每个父元素下的索引值是偶数的元素
:nth-child(odd)能选取每个父元素下的索引值是奇数的元素
:nth-child(2)能选取每个父元素下的索引值等于2的元素
:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从0开始)
:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。
(n从0开始) 例如:
$(‘div.one:nth-child(2)’).css(“background”,”red”)表示改变每个class为one的div父元素下 的第二个子元素的背景色
$(‘div.one:first-child’).css(“background”,”red”)表示改变每个class为one的div父元素下的第一个子元素的背景色
$(‘div.one:last-child’).css(“background”,”red”)表示改变每个class为one的div父元素的最后一个子元素的背景色
$(‘div.one:only-child’).css(“background”,”red”)表示如果class为one的div父元素下只有一个子元素,那么则改变这个子元素的背景色
八、表单对象属性过滤选择器
1. $(“#form1 :enabled”)选取id为”form1”的表单内所有可用元素
2.$(“#form1:disabled”)选取id为”form2”的表单内所有不可用元素
3.$(“input:checked”)选取所有被选中的input元素
4.$(“select:selected”)选取所有被算中的选项元素
5.$(“:input”)选取选取所有input
6.$(“:text”)选取所有的单行文本框
7.$(“:password”)选取所有的密码框
8.$(“:radio”)选取所有的单选框
9.$(“:checkbox”)选取所有的复选框
10.$(“:submit”)选取所有的提交按钮
11.$(“:image”)选取所有的图像按钮
12.$(“:reset”)选取所有的重置按钮
13.$(“:button”)选取所有的按钮
14.$(“:file”)选取所有的上传域
15.$(“:hidden”)选取所有的不可见元素
jQuery浏览器事件以及文档加载事件
一、鼠标事件
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
.click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
alert(‘dbclick function is running !’);
});
.mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。
alert(‘mouseup function is running !’);
}).click(function(){
alert(‘click function is running too !’);
});
.mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。
.mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
.mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。
alert(‘mouseleaver function is running !’);
});
(7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
$(‘p’).hover(function(){
alert(‘mouseenter function is running !’);
},function(){
alert(‘mouseleaver function is running !’);
});
二、键盘事件
1、keydown():在键盘按下时触发。
2、keyup():是按下键盘起来后的事件。
3、keypress():在敲击按键时触发,我们可以理解为按下并抬起同一个按键。
三、浏览器事件及文档加载事件
浏览器事件:
1. error()
2. resize()
3. scroll()
文档加载:
1 $(function () { });
2 $(document).ready(function () { });
3 window.onload = function () { }
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <style type="text/css"> .back{ background-color: #70bfef; } </style></head><body><fieldset><input type="text" tabindex="1"><input type="text" tabindex="2"><input type="text" tabindex="3"><input type="text" tabindex="4"><input type="text" tabindex="5"></fieldset><script type="application/javascript"> $(function () { $("fieldset").delegate("input","focus blur",function () { var inp=$("this"); setTimeout(function () { inp.toggleClass("back",inp.is(":focus")); },100); }); });</script></body></html>
<html lang="en"><head> <meta charset="UTF-8"> <title>jQuery绑定事件</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <style type="text/css"> div{ width: 400px; height: 400px; background-color: #b6b6b6; } p{ width: 200px; height: 200px; background-color: #e99494; } </style></head><body><div> <p></p></div><script type="application/javascript"> $(function () {// $("div").delegate("p","click",function () {// alert("点击P标签");//单击事件//// }) ;// $("div").bind("click mouseover",function (evt) {// if(evt.type=="click"){// alert("akakka");// }// else if(evt.type=="mouseover"){// alert("g划过");//鼠标滑过事件// }// });// $(window).resize(function () {// alert("改变大小");//窗口大校改变事件// });// var textone=function () {// alert("dianji");// }// $("div").on("click",textone);//on的使用方法// $("p").bind("click",function (evt) { alert(evt.currentTarget+"++++"+evt.delegateTarget+"+++"+evt.pageX);//事件对象 }) });</script></body></html>
- jQuery选择器及事件
- jQuery选择器及jQuery事件
- [jQuery] 选择器和事件
- jQuery选择器和事件
- jQuery选择器和事件
- JQuery 选择器和事件
- jQuery选择器和事件
- jQuery -- 选择器和事件
- jQuery选择器和事件
- jQuery 选择器 事件
- JQuery 选择器-事件方法
- 2.1jQuery选择器和事件-选择器
- Jquery学习---选择器与事件
- Jquery学习---选择器与事件
- Jquery选择器、事件器详解
- JQuery中的事件和选择器
- JQuery语法、选择器、事件器
- 1.jQuery选择器和事件
- hdu1711
- Python 从入门到实践 7-1 课后习题
- Wireshark数据抓包教程之Wireshark捕获数据
- 电商平台必备的组件开发,商品动态选购组件
- DOM元素的特性(Attribute)和属性(Property)
- jQuery选择器及事件
- 消息
- 70. Climbing Stairs
- 安卓水波滚动
- 哈希表
- 解决Gazebo ROS Kobuki plugin:NaN in d1. step time:0.01,WD……的问题
- Android contacts 联系人 通讯录 源码 完全解析
- 欢迎使用CSDN-markdown编辑器
- 如何理解new String(bytes, offset, length)