选择器
关于选择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> ]
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>
添加删除复制小实例
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>
》》》
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>
》》》》
四种事件绑定的方法
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>
》》》》》