jQuery事件的绑定

  <body>

     <button>点击1</button>

     <button>点击2</button>

  </body>

  ​

  <script src="jquery.3.4.1.js"></script>

  <script>

     $('button').click(

         function () {

             alert('你点了我一下!')

         }

     )

   # 这里简单的感受一下，下文会有详细的时间介绍

jQuery操作标签

标签内文本操作

  • html()：一是获取标签元素的所有内容；二是设置标签的内容，有识别标签的功能，可以是标签、dom对象、jQuery对象；

  • text():一是获取标签中的文本内容；二是设置文本内容

  $('li:first').html('<a href="http://www.mi.com">寻寻觅觅</a>')   //a标签

  ​

  var a = document.createElement('a')

  a.innerText = '凄凄惨惨切切'

  $('li:last').html(a)     //a 是dom对象

  ​

  var a2 = document.createElement('a')

  var jqobj = $(a2)

  jqobj.text('冷冷清清')

  $('li:last').html(jqobj)   //jqobj是jquery对象

标签的插入

  父子关系:

   追加儿子 :(父).append(子) (子).appendTo(父)

   头部添加 :(父).prepend(子) (子).prependTo(父)

  兄弟关系:

   添加哥哥 :参考点.before(要插入的)     要插入的.insertbefore(参考点)

   添加弟弟 :参考点.after(要插入的)     要插入的.insertAfter(参考点)

  如果被添加的标签原本就在文档树中,就相当于移动；子元素可以为：

  stirng | element（js对象） | jquery元素

  父元素.append(子元素)

标签的删除

 remove : 删除标签和事件,被删掉的对象做返回值

  detach : 删除标签,保留事件,被删掉的对象做返回值

  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)  //设置取消选中

【实例-全选、反选、取消】

  <!DOCTYPE html>

  <html lang="zh-ch">

  <head>

     <meta charset="UTF-8">

     <title>prop实例</title>

     <script src="jQuery_Library_v3.4.1.js"></script>

  </head>

  <body>

  <button id="all">全选</button>

  <button id="reverse">反选</button>

  <button id="cancel">取消</button>

  <table border width="1px">

     <thead>

         <th>cho</th>

         <th>name</th>

         <th>type</th>

     </thead>

     <tbody>

         <tr>

             <td><input type="checkbox"></td>

             <td>盖伦</td>

             <td>战士</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>赵信</td>

             <td>战士</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>女警</td>

             <td>ADC</td>

         </tr>

     </tbody>

  </table>

  </body>

  <script>

     var $checkbox = $(":checkbox");

     $("#all").click (function () {

         $(":checkbox").prop('checked',true)  //如果把prop换成attr只能进行一次操作，修改属性时使用prop比较方便

     });

     $("#reverse").click (function () {

         //方式一：遍历，将每一个checkbox的状态换一下

         // for (var i=0;i<$checkbox.length;i++)

         // {

         //     if ($checkbox[i].checked) {$checkbox[i].checked = false}

         //     else{$checkbox[i].checked = true}

         // }

         //方式二：把状态相同的checkbox分组放，然后状态互换

         // var $checked = $("input:checked");

         // var $unchecked = $("input:not(:checked)");

         // $checked.prop('checked',false);

         // $unchecked.prop('checked',true)

         //方式三：方式一的升级版

         for (var i=0;i<$checkbox.length;i++)

         {

             var status = $($checkbox[i]).prop('checked');

             $($checkbox[i]).prop('checked',!status)

         };

  ​

     });

     $("#cancel").click(function () {

         $(":checkbox").prop('checked',false)

     })

  </script>

  </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;

            }

 })

【元素的显示与隐匿】

 <!DOCTYPE html>

  <html lang="zh-ch">

  <head>

     <meta charset="UTF-8">

     <title>元素的显示与隐匿</title>

     <script src="jQuery_Library_v3.4.1.js"></script>

     <style>

         .active{color: #ff6700}

     </style>

  </head>

  <body>

     <ul>

         <li class="item">gailun</li>

         <li class="item">zhaoxin</li>

         <li class="item">jiawen</li>

     </ul>

  </body>

  <script type="text/javascript">

     $(function () {

         $('ul li').click(function () {

             // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象

             // 鼠标点击的对象添加active类属性，而其他兄弟移除active类属性

             $(this).addClass('active').siblings('li').removeClass('active')

         })

     })

  </script>

  </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])

【实例】

 <!DOCTYPE html>

  <html lang="zh-ch">

  <head>

     <meta charset="UTF-8">

     <title>value属性</title>

     <script src="jQuery_Library_v3.4.1.js"></script>

  </head>

  <body>

  <form action="">

     <input type="radio" name="sex" value="112" />男

     <input type="radio" name="sex" value="111" checked="" />女

  ​

     <input type="checkbox" value="a" checked="" /> 吃饭

     <input type="checkbox" value="b" checked="" /> 睡觉

     <input type="checkbox" value="c" checked="" /> 打豆豆

  ​

     <select name="timespan" id="timespan" class="Wdate">

         <option value="1">8:00-8:30</option>

         <option value="2" selected="">8:30-9:00</option>

         <option value="3">9:00-9:30</option>

     </select>

     <input type="text" name="" id="" value="11" />

  </form>

  </body>

  <script>

     $(function () {

         //获取值

         //1.获取单选框被选中的value值

         var sl1 = $('input[type=radio]:checked').val();

         //2.复选框被选中的value,获取的是第一个被选中的值

         var sl2 = $('input[type=checkbox]:checked').val();

         //3.下拉列表被选中的值

         var sl3 = $('#timespan option:selected');

         // 获取被选中的值

         var sl3_va = sl3.val();

         // 获取文本

         var sl3_text = sl3.text();

         //4.获取文本框的value值

         var text1 = $('input[type=text]').val();

  ​

     //     //设置值

     //     //1.设置单选按钮和多选按钮被选中项

     //     $('input[type=radio]').val(['112']);

     //     $('input[type=checkbox]').val(['a','b']);

     //

     //     //2.设置下拉列表框的选中值，必须使用select

     //             /*因为option只能设置单个值，当给select标签设置multiple。

     //             那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以

     //             */

     //     $('selected').val(['3','2']);

     //

     //     //3.设置文本框的value值

     //     $('input[type=text]').val('叽叽喳喳')

     })

  </script>

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

　　

JQuery II的更多相关文章

  1. 净捡软柿子捏--jQuery 遍历方法

    ---------------------------------------------add()------------------------------------------ jquery. ...

  2. Jquery 系列（2） 选择元素

    Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选 ...

  3. 使用jQuery.form插件，实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  4. jQuery中的Sizzle引擎分析

    我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...

  5. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  6. JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...

  7. JS/JQuery针对不同类型元素的操作（radio、select、checkbox）

    一.select下拉框 I:javascript方法 1:获取选中的值 F1:   var  myselect=document.getElementById("test");或者 ...

  8. jquery 幻灯片 左右滚动

    使用jquery封装的一个幻灯片插件 写的好差  参考了别人写的 后面再重构 现在这个应该可以直接用了 主要实现思路就是 添加当前选中状态 index相对应的 选中的图总是在第一位(也就是加选中状态的 ...

  9. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. 函数参数-arguments-reset参数

    1.JS中用:arguments 1)存放实参的集合,是一个类似于数组的对象,只有数组的 length,没有数组方法 function add1(a,b,c) { console.log(argume ...

  2. 洛谷-P2292-L语言(字典树)

    链接: https://www.luogu.org/problem/P2292 题意: 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是 ...

  3. 小程序上传base64的图片，可上传多张

    微信小程序上传图片转化为base64格式 clickimage: function(e) { var index = e.currentTarget.dataset.index; var count ...

  4. include和require的区别（PHP版本7）

    亲自测试了一下,发现include有条件包含require无条件包含这个区别在PHP7版本中(据说PHP5以后)是不存在的了,也就是在if(false){ } 中都不会执行:还有一个返回值的问题,测试 ...

  5. jpa多对一映射

    1.插入 建一个部门类Dept和一个员工类Emp: Emp对Dept是多对一的关系:因为一个部门有多个员工,而一个员工只有一个部门:   Emp类中添加一个Dept的属性: @ManyToOne注解表 ...

  6. 《剑指offer》算法题第十天

    今日题目: 数组中的逆序对 两个链表的第一个公共节点 数字在排序数组中出现的次数 二叉搜索树的第k大节点 字符流中第一个不重复的字符 1. 数组中的逆序对 题目描述: 在数组中的两个数字,如果前面一个 ...

  7. codevs 3185-3187 队列练习x

    三联水题……   3185x                      题目描述 Description 给定一个队列(初始为空),只有两种操作入队和出队,现给出这些操作请输出最终的队头元素. 操作解 ...

  8. rabbitmq 的安装配置使用

    前言: 对于消息队列中间件: #redis: 功能比较全,但是如果突然停止运行或断电会造成数据丢失 #RabbitMQ:功能比较齐全.稳定.便于安装,在生产环境来说是首选的 1.下载软件[下载较慢,请 ...

  9. python3网络编程

    网络编程(定义) 网络编程的本质就是两个设备之间的数据交换,当然,在计算机网络中,设备主要指计算机,数据传递本身 没有多大难度,不就是把一个设备中的数据发送给一个设备,然后接收另一个设备的反馈的数据. ...

  10. BZOJ刷题列表【转载于hzwer】

    沿着黄学长的步伐~~ 红色为已刷,黑色为未刷,看我多久能搞完吧... Update on 7.26 :之前咕了好久...(足见博主的flag是多么emmm......)这几天开始会抽时间刷的,每天几道 ...