jQuery选择器及事件

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #选择器 #事件

jQuery 专栏收录该内容

2 篇文章

订阅专栏

选择器
一、基本选择器
对于了解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. $("div[title$ =test]”)选取属性title以”test”结束的div元素

6..$(“div[title*=test]”)选取属性title含有”test”的div元素

7.. $("div[id][title$ =’test’]”)选取拥有属性id,并且属性title以”test”结束的div元素

七、子元素过滤选择器
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事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发。
$(‘p’).click(function(){ alert(‘click function is running !’); }); .dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。$ (‘p’).dbclick(function(){
alert(‘dbclick function is running !’);
});
.mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发。
$(‘p’).mousedown(function(){ alert(‘mousedown function is running !’); }); .mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发。$ (‘p’).mouseup(function(){
alert(‘mouseup function is running !’);
}).click(function(){
alert(‘click function is running too !’);
});
.mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性。
.mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。
.mouseenter事件：mouseenter事件是在用户光标进入元素上时触发。
$(‘p’).mouseenter(function(){ alert(‘mouseenter function is running !’); }); .mouseleaver事件：mouseleaver事件是在用户的光标离开元素时触发。$ (‘p’).mouseleaver(function(){
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>