jQuery事件的绑定
1 <body> 2 <button>点击1</button> 3 <button>点击2</button> 4 </body> 5 6 <script src="jquery.3.4.1.js"></script> 7 <script> 8 $('button').click( 9 function () { 10 alert('你点了我一下!') 11 } 12 ) 13 14 # 这里简单的感受一下，下文会有详细的时间介绍
jQuery操作标签
标签内文本操作
-
html()：一是获取标签元素的所有内容；二是设置标签的内容，有识别标签的功能，可以是标签、dom对象、jQuery对象；
-
text():一是获取标签中的文本内容；二是设置文本内容
1 $('li:first').html('<a href="http://www.mi.com">寻寻觅觅</a>') //a标签 2 3 var a = document.createElement('a') 4 a.innerText = '凄凄惨惨切切' 5 $('li:last').html(a) //a 是dom对象 6 7 var a2 = document.createElement('a') 8 var jqobj = $(a2) 9 jqobj.text('冷冷清清') 10 $('li:last').html(jqobj) //jqobj是jquery对象
标签的插入
1 父子关系: 2 追加儿子 :(父).append(子) (子).appendTo(父) 3 头部添加 :(父).prepend(子) (子).prependTo(父) 4 兄弟关系: 5 添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点) 6 添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点) 7 如果被添加的标签原本就在文档树中,就相当于移动；子元素可以为： 8 stirng | element（js对象） | jquery元素 9 父元素.append(子元素)
标签的删除
1 remove : 删除标签和事件,被删掉的对象做返回值 2 detach : 删除标签,保留事件,被删掉的对象做返回值 3 empty : 清空内容标签,自己被保留
标签的修改
修改 : replaceWith replaceAll replaceWith : a.replaceWith(b) 用b替换a replaceAll : a.replaceAll(b) 用a替换b
标签的复制
复制 : clone
var btn = $(this).clone() //克隆标签但不能克隆事件
var btn = $(this).clone(true) //克隆标签和事件
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
标签的属性操作
attr() 设置属性值、或者获取属性值
//获取值：attr()设置一个属性值的时候 只是获取值
$('div').attr('id')
$('div').attr('class')
//设置值
$('div').attr('class','box') //设置一个值
$('div').attr({name:'hahaha',class:'happy'}) //设置多个
removeAttr() 移除属性
//删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class');
//删除多个属性
$('#box').removeAttr('name class');
prop()
如果一个标签只有true和false两种情况,适合用prop处理
// 获取属性
$(selector).prop(属性名)
// 设置属性
$(selector).prop(属性名,属性值)
// 设置多个属性
$(selector).prop({属性名1:属性值, 属性名2:属性值,...})
$('input').attr('checked') //"checked"
$('input').prop('checked') //true
$('input').prop('cheched',false) //设置取消选中
【实例-全选、反选、取消】
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>prop实例</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 </head> 8 <body> 9 <button id="all">全选</button> 10 <button id="reverse">反选</button> 11 <button id="cancel">取消</button> 12 <table border width="1px"> 13 <thead> 14 <th>cho</th> 15 <th>name</th> 16 <th>type</th> 17 </thead> 18 <tbody> 19 <tr> 20 <td><input type="checkbox"></td> 21 <td>盖伦</td> 22 <td>战士</td> 23 </tr> 24 <tr> 25 <td><input type="checkbox"></td> 26 <td>赵信</td> 27 <td>战士</td> 28 </tr> 29 <tr> 30 <td><input type="checkbox"></td> 31 <td>女警</td> 32 <td>ADC</td> 33 </tr> 34 </tbody> 35 </table> 36 </body> 37 <script> 38 var $checkbox = $(":checkbox"); 39 $("#all").click (function () { 40 $(":checkbox").prop('checked',true) //如果把prop换成attr只能进行一次操作，修改属性时使用prop比较方便 41 }); 42 $("#reverse").click (function () { 43 //方式一：遍历，将每一个checkbox的状态换一下 44 // for (var i=0;i<$checkbox.length;i++) 45 // { 46 // if ($checkbox[i].checked) {$checkbox[i].checked = false} 47 // else{$checkbox[i].checked = true} 48 // } 49 //方式二：把状态相同的checkbox分组放，然后状态互换 50 // var $checked = $("input:checked"); 51 // var $unchecked = $("input:not(:checked)"); 52 // $checked.prop('checked',false); 53 // $unchecked.prop('checked',true) 54 //方式三：方式一的升级版 55 for (var i=0;i<$checkbox.length;i++) 56 { 57 var status = $($checkbox[i]).prop('checked'); 58 $($checkbox[i]).prop('checked',!status) 59 }; 60 61 }); 62 $("#cancel").click(function () { 63 $(":checkbox").prop('checked',false) 64 }) 65 </script> 66 </html>
class类属性操作
addClass添加类名
// 为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个
$('div').addClass("box box2");//追加多个
removeClass移除类
// 从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')；//移除box类
$('div').removeClass();//移除全部的类
# 通过类的添加和删除，实现元素的显示与隐藏
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
【元素的显示与隐匿】
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>元素的显示与隐匿</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 <style> 8 .active{color: #ff6700} 9 </style> 10 </head> 11 <body> 12 <ul> 13 <li class="item">gailun</li> 14 <li class="item">zhaoxin</li> 15 <li class="item">jiawen</li> 16 </ul> 17 </body> 18 <script type="text/javascript"> 19 $(function () { 20 $('ul li').click(function () { 21 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象 22 // 鼠标点击的对象添加active类属性，而其他兄弟移除active类属性 23 $(this).addClass('active').siblings('li').removeClass('active') 24 }) 25 }) 26 </script> 27 </html>
toggleClass类的切换
// 如果存在就删除一个类；如果不存在就添加一个类
$('div').toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
val 表单控件value属性
// 获取值：用于表单控件中获取值，比如input textarea select等等
$(selector).val()
// 设置值：
$('input').val('设置了表单控件中的值')；
$(':text').val('值')
$(':password').val('值')
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
【实例】
1 <!DOCTYPE html> 2 <html lang="zh-ch"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>value属性</title> 6 <script src="jQuery_Library_v3.4.1.js"></script> 7 </head> 8 <body> 9 <form action=""> 10 <input type="radio" name="sex" value="112" />男 11 <input type="radio" name="sex" value="111" checked="" />女 12 13 <input type="checkbox" value="a" checked="" /> 吃饭 14 <input type="checkbox" value="b" checked="" /> 睡觉 15 <input type="checkbox" value="c" checked="" /> 打豆豆 16 17 <select name="timespan" id="timespan" class="Wdate"> 18 <option value="1">8:00-8:30</option> 19 <option value="2" selected="">8:30-9:00</option> 20 <option value="3">9:00-9:30</option> 21 </select> 22 <input type="text" name="" id="" value="11" /> 23 </form> 24 </body> 25 <script> 26 $(function () { 27 //获取值 28 //1.获取单选框被选中的value值 29 var sl1 = $('input[type=radio]:checked').val(); 30 //2.复选框被选中的value,获取的是第一个被选中的值 31 var sl2 = $('input[type=checkbox]:checked').val(); 32 //3.下拉列表被选中的值 33 var sl3 = $('#timespan option:selected'); 34 // 获取被选中的值 35 var sl3_va = sl3.val(); 36 // 获取文本 37 var sl3_text = sl3.text(); 38 //4.获取文本框的value值 39 var text1 = $('input[type=text]').val(); 40 41 // //设置值 42 // //1.设置单选按钮和多选按钮被选中项 43 // $('input[type=radio]').val(['112']); 44 // $('input[type=checkbox]').val(['a','b']); 45 // 46 // //2.设置下拉列表框的选中值，必须使用select 47 // /*因为option只能设置单个值，当给select标签设置multiple。 48 // 那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以 49 // */ 50 // $('selected').val(['3','2']); 51 // 52 // //3.设置文本框的value值 53 // $('input[type=text]').val('叽叽喳喳') 54 }) 55 </script> 56 </html>
css样式
css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})
$('div').css('background-color','red') //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式
滚动条距离属性
// 水平方向 $(window).scrollLeft() //获取 $(window).scrollLeft( value )//设置 // 垂直方向 $(window).scrollTop() //获取 $(window).scrollTop( value ) //设置
盒子样式属性
内容宽高 : width和height 内容+padding : innerWidth和innerHeight 内容+padding+border :outerWidth和outerHeight 内容+padding+border+margin : outerWidth(true)和outerHeight(true) 设置值:变得永远是content的值 .width( value ) //设置宽度 .height( value ) //设置高度 .innerWidth(value);//设置 .innerHeight(value); //设置 .outerWidth(true) //获取第一个匹配元素：内容+padding+border+margin的宽 .outerWidth(value) //设置多个，调整的是“内容”的宽 .outerHeight(true) //第一个匹配元素：获取内容+padding+border+margin的高 .outerHeight( value ) //设置多个，调整的是“内容”的高
表单操作补充
$(':submit').click(
function () {
return false
}
)
如果返回false不提交
如果返回true提交