jquery选择器，筛选器，属性，事件基础

本文转载自查看原文 2017-04-14 15:32 2494 jquery

左边栏实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-3.2.1.min.js"></script>
 6     <style>
 7             .hide{
 8                 display: none;
 9             }
10 
11             .container{
12                 width:300px;
13                 height: 600px;
14                 background-color: #ddd;
15                 border: 1px solid #999;
16             }
17 
18             .container .title{
19                 height: 38px;
20                 font-size: 28px;
21                 line-height: 38px;
22                 background-color: orange;
23                 cursor: pointer;
24             }
25 
26             .container .body{
27                 background-color:white;
28             }
29 
30             .container .body a{
31                 display:block;
32                 padding: 10px;
33             }
34         </style>
35     <title>Title</title>
36 </head>
37 <body>
38 <div class='container'>
39             <div>
40                 <div class='title' onclick="Dis(this);">Menu1</div>
41                 <div class='body'>
42                     <a href="">content1</a>
43                     <a href="">content2</a>
44                     <a href="">content3</a>
45                 </div>
46             </div>
47 
48             <div>
49                 <div class='title' onclick="Dis(this);">Menu2</div>
50                 <div class='body hide'>
51                     <a href="">content1</a>
52                     <a href="">content2</a>
53                     <a href="">content3</a>
54                 </div>
55             </div>
56 
57             <div>
58                 <div class='title' onclick="Dis(this);">Menu3</div>
59                 <div class='body hide'>
60                     <a href="">content1</a>
61                     <a href="">content2</a>
62                     <a href="">content3</a>
63                 </div>
64             </div>
65 
66             <div>
67                 <div class='title'onclick="Dis(this);">Menu4</div>
68                 <div class='body hide'>
69                     <a href="">content1</a>
70                     <a href="">content2</a>
71                     <a href="">content3</a>
72                 </div>
73             </div>
74 
75             <div>
76                 <div class='title' onclick="Dis(this);">Menu5</div>
77                 <div class='body hide'>
78                     <a href="">content1</a>
79                     <a href="">content2</a>
80                     <a href="">content3</a>
81                 </div>
82             </div>
83 
84         </div>
85  <script type="text/javascript">
86     function Dis(ths){
87         $(ths).next().removeClass('hide');
88         $(ths).parent().siblings().find('.body').addClass('hide');
89 
90     }
91 </script>
92 </body>
93 </html>

左边栏实例

基本选择器：

<div id='11' class='top'></div>
$('.top')  class选择器
$('#11')  id选择器
$('div')  tag选择器

层级筛选器

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("form input")  找到表单里面所有的 input 元素（包括孙子级）
结果
 [ <input name="name" />, <input name="newsletter" /> ]

$("form > input") 匹配表单里面所有的子级input元素（儿子级）
结果
[ <input name="name" /> ]
$("label + input")  匹配所有紧跟在 label 后面的同级input 元素
结果
[ <input name="name" />, <input name="newsletter" /> ]

$("form ~ input")  找到所有与表单同辈的 input 元素
结果
[ <input name="none" /> ]

基本筛选器

$('li:first')  找到的第一个
$('li:last')  找到的最后一个
$('li:even') 查找所有找到的1、3、5...行（即索引值0、2、4...）
$('li:odd')   查找所有找到的2、4、6行（即索引值1、3、5...）
$('li:eq(1)') 找到的第2个（索引为1）
$('li:lt(2)')  查找第一第二行，即索引值是0和1，也就是比2小

筛选

筛选：
$('li').first() 找到的第一个
$('li').last() 找到的最后一个
$('li').eq(1) 找到的第二个（索引为1）
$('li').slice(2,5) 对找到的进行切片，end不写表示一直到最后
$('li').filter('.selected') 对找到的筛选出包含.selected
$('li').filter('.selected : first') 复合使用取第一个
$('li').hasClass("protected") 判断返回布尔值

选择：
找子级
$('li').children() 找到<li>里面的所有直接子级（儿子级）
$('li').find('a')  在<li>里面的所有子级里找a标签 （包括孙子级）
找同级
$('li').next() 找到<li>下一个同级
$('li').nextAll() 找到<li>下面的所有的同级
$('li').nextUntil() 选择从<li>往下一直到..的之间的
$('li').prev() 找到<li>上一个同级 $('li').prevAll() 找到<li>上面的所有同级 $('li').prevUntil() 选择从<li>往上一直到..的之间的 $('li').siblings() 所有同级（除了自己）
找父级
$('li').parent() 找到<li>的父级
$('li').parents() 找到<li>的所有父级（包括祖级）

jquery的循环

$.each(li,function(i,item){
    console.log(i,item)
})

i表示下标索引，item表示值

方式一

$(.title).each(function(i,item){    
    console.log(i,item)
})

方式二

属性和css

$("p").css("color");  取得第一个段落的color样式属性的值。

$("p").css({ "color": "#ff0011", "background": "blue" });  将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css("color","red");  将所有段落字体设为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            bottom: 0px;
            right: 0px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div style="height: 2000px;"></div>

<div onclick="GoTop()" class="back hide">返回顶部</div>

<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">

    function GoTop(){
        //返回顶部
        $(window).scrollTop(0);
    }

    $(function(){

        $(window).scroll(function(){
            //当滚动滑轮时，执行函数体

            //获取当前滑轮滚动的高度
            var top = $(window).scrollTop();

            if(top>100){
                //展示“返回顶部”
                $('.back').removeClass('hide');
            }else{
                //隐藏“返回顶部”
                $('.back').addClass('hide');
            }
        });
    });

</script>

</body>
</html>

返回顶部实例

文档加载完成执行的两种方式

方式 一

$(document).ready(function(){
    ....
})

方式 二

$(function(){
    ...
})

View Code

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7 
  8         body{
  9             margin: 0px;
 10         }
 11         img {
 12             border: 0;
 13         }
 14         ul{
 15             padding: 0;
 16             margin: 0;
 17             list-style: none;
 18         }
 19         .clearfix:after {
 20             content: ".";
 21             display: block;
 22             height: 0;
 23             clear: both;
 24             visibility: hidden;
 25         }
 26 
 27         .wrap{
 28             width: 980px;
 29             margin: 0 auto;
 30         }
 31 
 32         .pg-header{
 33             background-color: #303a40;
 34             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 35             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 36             box-shadow: 0 2px 5px rgba(0,0,0,.2);
 37         }
 38         .pg-header .logo{
 39             float: left;
 40             padding:5px 10px 5px 0px;
 41         }
 42         .pg-header .logo img{
 43             vertical-align: middle;
 44             width: 110px;
 45             height: 40px;
 46 
 47         }
 48         .pg-header .nav{
 49             line-height: 50px;
 50         }
 51         .pg-header .nav ul li{
 52             float: left;
 53         }
 54         .pg-header .nav ul li a{
 55             display: block;
 56             color: #ccc;
 57             padding: 0 20px;
 58             text-decoration: none;
 59             font-size: 14px;
 60         }
 61         .pg-header .nav ul li a:hover{
 62             color: #fff;
 63             background-color: #425a66;
 64         }
 65         .pg-body{
 66 
 67         }
 68         .pg-body .catalog{
 69             position: absolute;
 70             top:60px;
 71             width: 200px;
 72             background-color: #fafafa;
 73             bottom: 0px;
 74         }
 75         .pg-body .catalog.fixed{
 76             position: fixed;
 77             top:10px;
 78         }
 79 
 80         .pg-body .catalog .catalog-item.active{
 81             color: #fff;
 82             background-color: #425a66;
 83         }
 84 
 85         .pg-body .content{
 86             position: absolute;
 87             top:60px;
 88             width: 700px;
 89             margin-left: 210px;
 90             background-color: #fafafa;
 91             overflow: auto;
 92         }
 93         .pg-body .content .section{
 94             height: 500px;
 95         }
 96         .back{
 97             position: fixed;
 98             bottom: 0px;
 99             left: 0px;
100         }
101         .hide{
102             display: none;
103         }
104     </style>
105 </head>
106 <body>
107 
108     <div class="pg-header">
109         <div class="wrap clearfix">
110             <div class="logo">
111                 <a href="#">
112 
113                 </a>
114             </div>
115             <div class="nav">
116                 <ul>
117                     <li>
118                         <a  href="#">首页</a>
119                     </li>
120                     <li>
121                         <a  href="#">功能一</a>
122                     </li>
123                     <li>
124                         <a  href="#">功能二</a>
125                     </li>
126                 </ul>
127             </div>
128 
129         </div>
130     </div>
131     <div class="pg-body">
132         <div class="wrap">
133             <div class="catalog">
134                 <div class="catalog-item active" auto-to="function1"><a>第1张</a></div>
135                 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
136                 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
137                 <div onclick="GoTop()" class="back hide">返回顶部</div>
138             </div>
139             <div class="content">
140                 <div menu="function1" class="section">
141                     <h1>第一章</h1>
142                 </div>
143                 <div menu="function2" class="section">
144                     <h1>第二章</h1>
145                 </div>
146                 <div menu="function3" class="section">
147                     <h1>第三章</h1>
148                 </div>
149             </div>
150         </div>
151 
152     </div>
153 
154     <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
155     <script type="text/javascript">
156         function GoTop() {
157             $(window).scrollTop(0);
158 
159         }
160         $(function(){
161             //滑动屏幕控制菜单栏和回到顶部
162             $(window).scroll(function () {
163                 var sct = $(window).scrollTop();
164                 if(sct>60 && 100>sct){
165                     $('.catalog').addClass('fixed');
166                     $('.back').addClass('hide');
167                 }else if(sct >=100) {
168                     $('.back').removeClass('hide');
169                     $('.catalog').addClass('fixed');
170                     }else{
171                     $('.catalog').removeClass('fixed');
172                     $('.back').addClass('hide');
173                 }
174                 $('.section').each(function () {
175                     var offSet=$(this).offset().top;
176                     var lht =$(this).height();
177                     var totalheight =offSet+lht;
178                     var documentheight = $(document).height();
179                     var windowheight = $(window).height();
180                     if(offSet<sct && totalheight>=sct){
181                         if(windowheight+sct==documentheight){
182                              $('.catalog-item').last().addClass('active').siblings().removeClass('active');
183                         }else {
184                             var menus = $(this).attr('menu');
185                             $('.catalog').find('[auto-to="'+menus+'"]').addClass('active').siblings().removeClass('active');
186                         }
187 
188                     }
189 
190                 })
191 
192             })
193             //点击菜单栏到达内容位置
194             $('.catalog-item').bind('click',function () {
195                 var auto = $(this).attr('auto-to');
196                 var lht = $('div').find('[menu="'+auto+'"]').offset().top;
197                 $(window).scrollTop(lht);
198             })
199 
200 
201 
202         })
203     </script>
204 </body>
205 </html>

滚动菜单，返回顶部，跳到指定内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script type="text/javascript" src='jquery-1.8.2.js'></script>
        <script type="text/javascript">
            $(function(){
                $('#selectAll').click(function(){
                    $('#checklist :checkbox').prop('checked',true);
                })
                $('#unselectAll').click(function(){
                    $('#checklist :checkbox').prop('checked',false);
                })
                $('#reverseAll').click(function(){
                    $('#checklist :checkbox').each(function(){
                        $(this).prop('checked',!$(this).prop('checked'))
                    })
                })

            })            
        </script>
    </head>
    <body>
        <div id='checklist'>
            <input type='checkbox' value='1'/>篮球
            <input type='checkbox' value='2'/>足球
            <input type='checkbox' value='3'/>羽毛球
        </div>
        <input type='button' value='全选' id='selectAll' />
        <input type='button' value='不选' id='unselectAll' />
        <input type='button' value='反选' id='reverseAll' />
    </body>
</html>

全选反选取消

$(document).height() 页面高度

$(window).scrollTop() 滑轮高度

$(window).height() 屏幕高度

$('.tip').height() 标签高度

$('.tip').offset() 标签到顶端的距离

$('.tip').offset().top 标签到顶端的高度

事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

实例：移动面板

绑定事件

$('.class').bind('click',function(){

　　....})

同时绑定多个事件类型

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});


同时绑定多个事件类型/处理程序

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

委托事件

html代码

<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

-----------------------------------------------------------

jquery代码

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

内容

html代码：
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
------------------------------------------------------------
jquery代码：

$("div:contains('John')")    查找所有包含 "John" 的 div 元素

---------------------------------------------------------------------
结果：

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

属性

prop  应用在input txetarea select

$("input[type='checkbox']").prop("checked");  选中为true,没选中为false

$("input[type='checkbox']").prop("disabled",true);  禁用页面上的所有复选框
$("input[type='checkbox']").prop("checked", true);  选中所有页面上的复选框。

attr  应用在除了input txetarea select以外的所有

$("img").attr("src","test.jpg");  设置单个属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });  设置多个属性

removeAttr  移除属性
$("img").removeAttr("src");

addClass  增加class
removeClass  移除class

HTML代码/文本/值
$('p').html();
$('p').textl();  
$('p').val();   获取文本框中的值

文档处理

内部插入

$("p").append("<b>Hello</b>");  向所有段落中追加一些HTML标记。
$("p").prepend("<b>Hello</b>");  向所有段落中前置一些HTML标记代码

<p><b>Hello</b>I would like to say: </p>

html代码：
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jquery代码：
$("p").prepend( $(".foo")[0] );
结果：
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>

appenedTo，prependTo

html代码：
<p>I would like to say: </p>
<div></div><div></div>
jquery代码：
$("p").appendTo("div");
结果：
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

外部插入

before,after, 在段落之前/后插入
$("p").before("<b>Hello</b>");
$("p").after("<b>Hello</b>");

insertBefore,insertAfter

html代码

<div id="foo">Hello</div><p>I would like to say: </p>
jquery代码

$("p").insertBefore("#foo");
结果：

<p>I would like to say: </p><div id="foo">Hello</div>

替换

replaceWith  后面替换前面
$("p").replaceWith("<b>Paragraph. </b>");

replaceAll    前面替换后面
$("<b>Paragraph. </b>").replaceAll("p");

删除

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

$("p").empty(); 内容删除 保留<p></p>

$("p").remove();包括<p></p>全部删除

复制

<b>Hello</b><p>, how are you?</p>

$("b").clone().prependTo("p");

结果：
<b>Hello</b><p><b>Hello</b>, how are you?</p>

http://www.php100.com/manual/jquery/

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jQuery选择器之属性筛选选择器 jquery 属性筛选选择器 jquery 选择器、筛选器、事件绑定与事件委派 Jquery 筛选选择器 jQuery选择器之基本筛选选择器 ArcGIS属性选择器筛选 jquery中的筛选选择器 jquery 子元素筛选选择器 jQuery属性选择器 jQuery “没有属性”选择器

jquery选择器，筛选器，属性，事件 基础

基本筛选器

文档处理

内部插入

替换

免责声明！

jquery选择器，筛选器，属性，事件基础