选择器
基本选择器 id:$('#id') class:$('.class') 标签选择器: $('标签名称') 组合选择器 后代选择器:$('.outer p') 子代选择器:$('.outer>p') 多元素选择器:$('.outer,#d1') 属性选择器 $("[属性名='值']") 表单选择器 $("[type='text']") == $(':text') 筛选器: $('ul li').eq() $('ul li').first() $('ul li').last() $("").hasclass('c1') 导航查找方法: 向下查找兄弟标签: $().next() $().nextAll() $().nextUntil('.c1') 向上查找兄弟标签: $().prev() $().prevAll() $().prevUntil('.c1') 查找所有兄弟标签: $().sibilings() 查找子标签: 子代查找: $().children('') 后代查找: $().find('') 查找父级标签: $().parent() $().parentUntil('') 属性操作 文本操作: $().html() $().text() $().val() 属性操作: DOM: ele.属性名=值 ele.setAttribute('属性名','值') jquery: $().attr('属性名') $().attr('属性名','值') class属性操作: $().addClass('c1') $().removeClass('c1') 节点操作： 创建节点： $('<标签名>') 父节点.append(子节点) 子节点.appendTo(父节点)
jquery事件绑定方式一: jquery对象.click(function(){ alert(123) })
jquery事件绑定方式二: jquery对象.on('click',function(){ alert(123) })
方式一是方式二的简写形式，但是方式二可以动态的添加标签并且使刚添加的标签也有
和其他标签相同的效果
没有动态效果添加的用方式一，有事件委派发生的情况就用方式二
事件委派
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script src='jquery-3.1.1.js'></script>
<script>
$('button').click(function(){
var $li=$('<li>'); // 创建<li></li>标签
$li.html('444');
$('ul').append($li);
});
$('ul').on('click','li',function(){
alert(123)
});
</script>
</body>
$(document).ready(function(){}) == $(function(){})
把js代码放在head区域时，用于等整个文档加载完之后才会执行js代码
但习惯于把js代码放在body的最下面，所以上面的用法就可以不用了
each循环
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script src='jquery-3.1.1.js'></script>
<script>
var arr=[11,22,33];
var obj={'name':'tom','age':11};
//$.each遍历循环方式一：$.each(obj,function)
$.each(arr,function(i,v){
console.log(i,v) //i遍历的是索引,v遍历的是值
});
$.each(obj,function(i,v){
console.log(i,v) //i遍历的是键,v遍历的是键对应的值
});
//$.each遍历循环方式二：$('').each(function)
$('p').each(function(i){
console.log(i); //拿到的是索引值
if(i==1){
$(this).css('color','red')
};
console.log($(this).html());
});
</script>
</body>
表格操作
<head> <style> </style> </head> <body> <button class='selectAll'>全选</button> <button class='cancelAll'>取消</button> <button class='reverseAll'>反选</button> <hr> <table border='1'> <tr> <td><input type='checkbox' checked='checked'/></td> <td>张三</td> <td>12</td> <td>s6</td> </tr> <tr> <td><input type='checkbox'/></td> <td>张三</td> <td>12</td> <td>s6</td> </tr> <tr> <td><input type='checkbox'/></td> <td>张三</td> <td>12</td> <td>s6</td> </tr> </table> <script src='jquery-3.1.1.js'></script> <script> $('.selectAll').click(function(){ $(':checkbox').prop('checked',true) }); $('.cancelAll').click(function(){ $(':checkbox').prop('checked',false) }); //$('.reverseAll').click(function(){ // $(':checkbox').each(function(){ // if($(this).attr('checked')){ // $(':checkbox').removeAttr('checked') // }else{ // $(':checkbox').attr('checked','checked') // } // }) //}); 此种方法可以验证一下，会出问题 $('.reverseAll').click(function(){ $(':checkbox').each(function(){ if($(this).prop('checked')){ $(this).prop('checked',false) }else{ $(this).prop('checked',true) } }) }); //也可以一句代码解决问题 //$('.reverseAll').click(function(){ // $(this).prop('checked',!$(this).prop('checked')) //}); //以后凡是遇到checked,selected像这种选中勾中的属性，用prop处理 </script> <body>
文本操作
<body> <input type='text' class='c1' value='123'/> <textarea class='c2'></textarea> <select name='pro' id='d1'> <option value='hebei'>河北省</option> <option value='hubei'>湖北省</option> <option value='hunan'>湖南省</option> </select> <button>show</button> <script src='jquery-3.1.1.js'></script> <script> //取值 $('.c1').val(); console.log($('.c1').val()); //赋值 $('.c1').val('hello'); console.log($('.c1').val()); $('button').click(function(){ //console.log($('.c2').val()) console.log($('#d1').val()) }); </script> </body>
文档节点
<style> .c1{ 300px; height:300px; border: solid red 2px; } </style> <body> <div class='c1'> <h3>hello world</h3> </div> <hr> <button>add</button> <script src='jquery-3.1.1.js'></script> <script> $('button').click(function(){ //创建标签 var $img=$('<img>'); $img.attr({'src':'tupian.jpg','width':100,'height':100}); $('.c1').append($img); //等同于 $img.appendTo($('.c1')) $('h3').after($img) //替换标签 //$('.c1 h3').replaceWith($img); //删除标签 //$('h3').remove() //清空 //$('.c1').empty() }) </script> </body>
clone示例
<body> <div class='outer'> <div class='item'> <button class='add'>+</button> <input type='text'/> </div> </div> <script src='jquery-3.1.1.js'></script> <script> //$('.add').click(function(){ // var $item=$('.item').clone(); // $('.outer').append($item) //}) 错误方法 $('.add').click(function(){ var $item=$(this).parent().clone(); $item.children().first().html('-').attr('class','del_ele'); $('.outer').append($item) }); $('.outer').on('click','.item .del_ele',function(){ console.log($(this)); $(this).parent().remove() }) </script> </body>
jquery动画
<style> </style> <body> <p>yuan</p> <button class='xianshi'>显示</button> <button class='yincang'>隐藏</button> <button class='qiehuan'>切换</button> <hr> <h4>淡入淡出<h4> <img src='tupian.jpg' class='tupian'> <p> <button class='danru'>淡入</button> <button class='danchu'>淡出</button> <button class='danqie'>切换</button> </p> <script src='jquery-3.1.1.js'></script> <script> $('.xianshi').click(function(){ $('p').show(1000) }); $('.yincang').click(function(){ $('p').hide(1000) }); $('.qiehuan').click(function(){ $('p').toggle(1000) }); $('.danru').click(function(){ $('.tupian').fadeIn(1000) }); $('.danchu').click(function(){ $('.tupian').fadeOut(1000) }); $('.danqie').click(function(){ $('.tupian').fadeToggle(1000) }); </script> </body>
jquery之偏移量
<style> body{ margin:0; } .c1{ 200px; height:200px; background-color: #2459a2 } </style> <body> <div class='c1'></div> <button>change</button> <script src='jquery-3.1.1.js'></script> <script> //offset方法的参照物是可视窗口 console.log($('.c1').offset()); console.log($('.c1').offset().top); console.log($('.c1').offset().left); $('button').click(function(){ $('.c1').offset({top:200,left:200}) }) </script> </body>
position
<style> body{ margin:0; } .c1{ 200px; height:200px; background-color: #2459a2; } .c2{ 200px; height:200px; background-color: darkgoldrod; } .father{ position: relative; } </style> <body> <div class='c1'></div> <div class='father'> <div class='c2'></div> </div> <button>change</button> <script src='jquery-3.1.1.js'></script> <script> console.log($('.c2').position().top); console.log($('.c2').position().left); console.log($('.c2').offset().top); console.log($('.c2').offset().left); $('button').click(function(){ $('.c1').offset({top:200,left:200}) }) </script> </body>