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的更多相关文章

净捡软柿子捏--jQuery 遍历方法
---------------------------------------------add()------------------------------------------ jquery. ...
Jquery 系列（2）选择元素
Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树如何通过CSS选择符在页中查找元素扩展jQuery标准的CSS选择符选 ...
使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
jQuery中的Sizzle引擎分析
我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...
用jquery实现抽奖小程序
用jquery实现抽奖小程序这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...
JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...
JS/JQuery针对不同类型元素的操作（radio、select、checkbox）
一.select下拉框 I:javascript方法 1:获取选中的值 F1: var myselect=document.getElementById("test");或者 ...
jquery 幻灯片左右滚动
使用jquery封装的一个幻灯片插件写的好差参考了别人写的后面再重构现在这个应该可以直接用了主要实现思路就是添加当前选中状态 index相对应的选中的图总是在第一位(也就是加选中状态的 ...
jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

集合(七) Set—HashSet，TreeSet和LinkedHashSet
四.Set Set和List一样,也是继承Collection的接口,但Set是不包含重复元素的集合.由于先啃下Map,Set的难度将会大幅减小.因为Set基本上都是以Map为基础实现的,例如两个主要 ...
DevExpress Blazor组件全新来袭！增强Data Grid、TreeView API
点击获取DevExpress v19.1.7最新完整版试用下载 DevExpress UI for Blazor即将在最新的v19.1.8中可用,此次更新发布包括DevExpress Blazor组件 ...
php类知识---最疯狂的魔术方法serialize，_sleep,__wakeup,unserialize,__autoload，__clone
serialize-----把实例化的对象写入文件 __sleep 调用serialize时触发 <?php class mycoach { public function __construc ...
常用NoSql数据库比较
1. CouchDB 所用语言: Erlang 特点:DB一致性,易于使用使用许可: Apache 协议: HTTP/REST 双向数据复制, 持续进行或临时处理, 处理时带冲突检查, 因此,采用的 ...
vue2.0 + element-ui2实现分页
当我们向服务端请求大量数据的时候,并要在页面展示出来,怎么办?这个时候一定会用到分页. 本次所使用的是vue2.0+element-ui2.12实现一个分页功能,element-ui这个组件特别丰富, ...
使用Navicat客户端运行SQL语句出现中文乱码
出现乱码无非就是编码方式不统一造成的,通过查阅资料解决了问题. (简体中文系统环境支持国标 GB2312.GB18030 和 Unicode (UTF-8) 编码.它们在系统中设置的locale(亦 ...
ASCII和UTF-8
造冰箱的熊猫@cnblogs 2018/12/11 用了这么久的UTF-8,第一次了解了点UTF-8的细节 UTF-8[1]属于变长度编码.一个UTF-8字符的编码长度为1~4个字节. 1)长度为1个 ...
[sdoi 2010][bzoj 1925]地精部落（神仙dp）
Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分为从左到右的 N 段,每段有一个独一无二的高度 Hi, ...
codeforces402B
Trees in a Row CodeForces - 402B The Queen of England has n trees growing in a row in her garden. At ...
20175215 2018-2019-2 第九周java课程学习总结
第十一章 JDBC与MySQL数据库 11.1 MySQL数据库管理系统下载安装过程略使用的是MySQL 5.6而非5.7 11.2 启动MySQL数据库服务器启动和root用户过程略 11.3 ...

JQuery II

jQuery事件的绑定

jQuery操作标签

标签内文本操作

标签的插入

标签的删除

标签的修改

标签的复制

标签的属性操作

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

removeAttr() 移除属性

prop()

class类属性操作

addClass添加类名

removeClass移除类

toggleClass类的切换

val 表单控件value属性

css样式

滚动条距离属性

盒子样式属性

表单操作补充

JQuery II的更多相关文章

随机推荐

热门专题