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選擇器，篩選器，屬性，事件基礎