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   # 这里简单的感受一下，下文会有详细的时间介绍

View Code

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对象

View Code

标签的插入

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>

value值

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提交

原文地址：https://www.cnblogs.com/jjzz1234/p/11396694.html

JQuery II

jQuery事件的绑定

jQuery操作标签

标签内文本操作

标签的插入

标签的删除

标签的修改

标签的复制

标签的属性操作

attr() 设置属性值、或者获取属性值

removeAttr() 移除属性

prop()

class类属性操作

addClass添加类名

removeClass移除类

toggleClass类的切换

val 表单控件value属性

css样式

滚动条距离属性

盒子样式属性

表单操作补充