jquery

选择器

　关于选择id

<div id="i1">123</div>

执行过程（console中）

$('#i1')
jQuery.fn.init [div#i1, context: document, selector: "#i1"]
$('#i1')[0]
<div id="i1">123</div>
document.getElementById('i1')
<div id="i1">123</div>

2，class

<div class="c1">456</div>

执行过程

$('.c1')
jQuery.fn.init [div.c1, prevObject: jQuery.fn.init(1), context: document, selector: ".c1"]
$('.c1')[0]
<div class="c1">456</div>

3，标签（组合选择器）

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

执行代码

$("div,span,p.myClass")

执行结果

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

4，

 1 :first
 2 V1.0概述
 3 获取第一个元素
 4 示例
 5 描述:
 6 获取匹配的第一个元素
 7 HTML 代码:
 8 <ul>
 9     <li>list item 1</li>
10     <li>list item 2</li>
11     <li>list item 3</li>
12     <li>list item 4</li>
13     <li>list item 5</li>
14 </ul>
15 jQuery 代码:
16 $('li:first');
17 结果:
18 [ <li>list item 1</li> ]

View Code

5.实例菜单选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide {
 8             display: none;
 9         }
10 
11         .active {
12             background-color: red;
13         }
14 
15         .menu {
16             height: 38px;
17             line-height: 38px;
18             background-color: snow;
19         }
20 
21         .menu .menu-item {
22             float: left;
23             border-right: 1px solid red;
24             padding: 0 5px;
25             cursor: pointer;
26         }
27 
28         .content {
29             min-height: 100px;
30             border: 1px solid red;
31         }
32     </style>
33 </head>
34 <body>
35 <div style=" 700px;margin: 0 auto ">
36     <div class="menu">
37         <div class="menu-item active" a="1">菜单一</div>
38         <div class="menu-item" a="2">菜单二</div>
39         <div class="menu-item" a="3">菜单三</div>
40     </div>
41     <div class="content">
42         <div b="1">内容一</div>
43         <div b="2" class="hide">内容二</div>
44         <div b="3" class="hide">内容三</div>
45     </div>
46 </div>
47 <script src="jquery-1.12.4.js"></script>
48 <script>
49     $('.menu-item').click(function () {
50         $(this).addClass('active').siblings().removeClass('active');
51         var target = $(this).attr('a');
52         $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');
53     })
54 </script>
55 
56 </body>
57 </html>

View Code

添加删除复制小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input id="t1" type="text"/>
 9 <input id="a1" type="button" value="添加"/>
10 <input id="a2" type="button" value="删除"/>
11 <input id="a3" type="button" value="复制"/>
12 <ul id="u1">
13     <li>1</li>
14     <li>2</li>
15 </ul>
16 <script src="jquery-1.12.4.js"></script>
17 <script>
18     $('#a1').click(function () {
19         var v = $('#t1').val();
20         console.log(v);
21         var temp = "<li>" + v + "</li>";
22 //        $('#u1').append(temp);
23 // 在找到de标签的子标签的底部添加
24         $('#u1').prepend(temp);
25 // 在找到的标签的子标签的开始添加
26 //        $('#u1').after(temp);
27 // 在找到的标签的后面添加
28 //        $('#u1').before(temp);
29 // 在找到的标签的前面添加
30     });
31     //    复制索引值指定的html内容，并删除
32     $('#a2').click(function () {
33         var index = $('#t1').val();
34         console.log(index);
35         $('#u1 li').eq(index).remove();
36     });
37     //    复制索引值指定的html内容，追加在找到的标签的子标签的底部添加
38     $('#a3').click(function () {
39         var index = $('#t1').val();
40         var v = $('#u1 li').eq(index).clone();
41         console.log(v);
42         $('#u1').append(v);
43     });
44 </script>
45 </body>
46 </html>

View Code

》》》

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div style=" 500px;position: absolute;border: 1px solid red">
10     <div id="title" style="height: 50px;background-color: black"></div>
11     <div style="height: 100px;background-color: beige"></div>
12 </div>
13 <script type="text/javascript" src="jquery-1.12.4.js"></script>
14 <script>
15     $(function () {
16         $('#title').mouseover(function () {
17             $(this).css('cursor', 'move');
18         });
19         $('#title').mousedown(function (e) {
20             var _event = e || window.event;
21             var ord_x = _event.clientX;
22             var ord_y = _event.clientY;
23             var parent_left = $(this).parent().offset().left;
24             console.log(parent_left);
25             var parent_top = $(this).parent().offset().top;
26             console.log(parent_top);
27             $('#title').on('mousemove', function (e) {
28                 var _new_event = e || window.event;
29                 var new_x = _new_event.clientX;
30                 var new_y = _new_event.clientY;
31 
32                 var x = parent_left + (new_x - ord_x);
33                 var y = parent_top + (new_y - ord_y);
34 
35                 $(this).parent().css('left', x + 'px');
36                 $(this).parent().css('top', y + 'px');
37             })
38         });
39 
40         $("#title").mouseup(function () {
41             $("#title").off('mousemove');
42         });
43     })
44 </script>
45 </body>
46 </html>

View Code

》》》》

四种事件绑定的方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <input id="i1" type="text">
 9 <input id="i2" type="button" value="添加"/>
10 <ul id="u1">
11     <li>1</li>
12     <li>2</li>
13     <li>3</li>
14 </ul>
15 <script src="jquery-1.12.4.js"></script>
16 <script>
17     $('#i2').click(function () {
18         var v = $('#i1').val();
19         var temp = "<li>" + v + "</li>";
20         $('#u1').append(temp);
21     });
22 
23     //    $('ul li').click(function () {
24     //        var v = $(this).text();
25     //        alert(v);
26     //    });
27 
28     //    $('ul li').bind('click',function () {
29     //        var v = $(this).text();
30     //        alert(v);
31     //    });
32 
33     //    $('ul li').on('click',function () {
34     //        var v = $(this).text();
35     //        alert(v);
36     //    });
37 
38     $('ul').delegate('li', 'click', function () {
39         var v = $(this).text();
40         alert(v);
41     })
42 </script>
43 </body>
44 </html>

View Code

》》》》》