你的位置:首页 > Java教程

[Java教程]Web_jQuery

Web_jquery - OnePiece° - 博客园

Web_jquery 楔子 需求一:有html标签关系如下,请找到所有的含有a标签的li标签 北京 上海 天津 原生js实现 jqeury实现 需求二:将上面的li标签实现隔行换色效...

Web_jQuery - 我是深水的猫 - 博客园

Web_jQuery 第1章: jQuery简介 为了简化JavaScript 的开发,一些 JavsScript 库诞生了威廉希尔娱乐。 JavaScript库封装了很多预定义的对象和实用函数,简化HTML与Ja...

web前端jquery分页查询的实现_gujian_peachblossom的博客-CSDN博客

jquery前端实现分页效果 05-21 javaweb项目,jquery前段实现分页效果,针对数据量不是很大时使用白金会.-娱乐集团。 下载 Jquery的pagination前端分页技术,带查询功...

javaweb-jquery_JQ3的博客-CSDN博客

1.定义:jQuery是一个快速、简洁的JavaScript框架,一个优秀的JavaScript代码... jQuery是一个快速、简洁的JavaScript框架,一个优秀的JavaScript代码库...

web中jquery的问题?_百度知道

4个回答 - 回答时间: 2019年10月30日

要#123 而且你混淆了uedbet。现场直播足球。新濠娱乐平台。 .onclick= 是原生js的写法 那么你前面不要用jq对象博狗 娱乐官网欢迎您。要用document.querySelector; 此处...更多关于Web_jQuery的问题gt;gt;

WEB前端jQuery特效_素材中国17素材网

17sucai的WEB前端jQuery特效画板,收入32个采集,被0个人关注百家乐官网。... WEB前端jQuery特效 收藏 源文件 预览 modernizr html5响应式全屏图片幻灯片切换效果 幻灯片 9547 1...

jQuery的设计思想 - 知乎

jQuery是继prototype 之后又一个优秀的轻量级JavaScript 框架英超买球manbetx。jQuery设计的宗旨是...成为开发网站等复杂度较低的Web 应用程序的首选JavaScript 库,并得到了大公司如...

web前端开发JQuery常用实例代码片段(50个)_jquery_脚本之家

本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助,需要的朋友快来学习一下吧本文给大家展示50个jquery代码片段,这些代码...

在一个web项目中如何引入jquery,是否只要引_百度知道

1个回答 - 回答时间: 2018年6月13日

lt;script src=quot;./libs/jquery/2.1.4/jquery.min.jsquot;gt;lt;/scriptgt; 直接复制到你的页面中去,jquery都不用下载了,这是cdn的,...更多关于Web_jQuery的问题gt;gt;

Web前端jquery学习笔记(四)_no

Web前端jquery学习笔记(四) 2019-08-16 15:42 大家好,我是轻风乍起,本人从事前端8年了,总结了很多学习资料,有时间我会普及一些入门和提升建议,思想提...

Web开发的大爆炸:jQuery是什么?

jQuery可能是Web开发中使用最广泛的JavaScript库足球推荐网。请继续阅读以了解如何使用这个强大的工具明升88。 jQuery的核心是一个DOM操作和导航库百家乐网址。记住DOM是我们的文...

webpack写jquery插件的环境配置_jQuery | 3672js教程

webpack写jquery插件的环境配置,webpack写jquery插件的环境配置 客户需求要一个具备树结构、带复选框的下拉选择控件;在网上找到了select2、autople...

mobile_web_jquery-cp命令-值传递ajax数据传递excel - 阿里云

阿里云云栖社区为您免费提供mobile_web_jquery的相关博客问答等,同时为你提供mobile,web,jquery-cp命令-值传递ajax数据传递excel等,云栖社区以分享专业、优质、高效...

web前端 JQUERY 最新jQuery_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

.chuanzhi.JQUERY 最新jQuery本视频有点乱,请自己摸索着看乐8。... web前端 JQUERY 最新jQuery科技演讲·公开课2018-05-01 14:53:49 --播放?·?-...

JavaWeb之jQuery基础学习与总结_JavaScript_林大侠-CSDN博客

jQuery是一个兼容多浏览器的、轻量级的JavaScript库65比分网。jQuery是继prototypeJavaScript... 分类专栏: JavaSEamp;JavaWeb 版权声明:...jQuery是一个兼容多...

WebRTC jQuery 插件 | 剑痴乎

lt;!-- Plugin Initialization --gt; $(function() { $(#39;#mainContainer#39;).createVideoChat(); }); 完整...组团到港珠澳大桥旅游组团到港珠澳大桥旅游澳门高端品质旅游团澳门高端品质旅游团澳门旅游邮轮澳门旅游邮轮北京出租车调价后 北京出租车调价后 北京出租车调价后 北京出租车调价后 北京出租车调价后 北京出租车调价后 北京出租车调价结果 北京出租车调价结果 北京出租车调价结果 北京出租车调价结果 北京出租车调价结果 北京出租车调价结果 北京出租车调价原因 北京出租车调价原因 北京出租车调价原因 北京出租车调价原因 北京出租车调价原因 北京出租车调价原因 北京出租车调整价格 北京出租车调整价格 北京出租车调整价格 北京出租车调整价格 北京出租车调整价格 北京出租车调整价格

为什么要使用jQuery

jQuery 的两大特点

  • 链式编程:比如.show().html()可以连写成.show().html()买足球彩票用什么软件好。

  • 隐式迭代:隐式 对应的是 显式uedbet体育。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用欧洲杯直播网站。

什么是 jQuery

jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率九洲娱乐网。

js库是把我们常用的复杂功能封装到简单的方法中,我们用的时候,将库直接引入然后调用方法即可爱波网。

初期,主要学习如何使用jQuery操作DOM,其实就是学习jQuery封装好的那些功能API百家乐官网。

这些API的共同特点是:几乎全都是方法hg0088皇冠。所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同zhibo 8。

版本说明

jQuery 有三个大版本:

    • 1.x版本:最新版为 v1.11.3博狗备用。

    • 2.x版本:最新版为 v2.1.4(不再支持IE6、7、8)万博manbetx平台。

    • 3.x版本足彩开户。

jQuery的使用

使用 jQuery 的基本步骤

下载 :jQuery有两个文件,一个是jquery-3.4.1.js(未压缩版),一个是jquery-3.4.1.min.js(压缩版,推荐项目上线时使用)

关于jQuery的相关资料:

    • 官网 在线手册 src="/images/img2018 blogs blog827651201908827651-20190803010126992-1481898717.png" alt="" width="481" height="155">

      注意:导包的代码一定要放在js代码的最上面杏彩论坛。 

      jQuery 的入口函数和 $ 符号

      入口函数(重要)

      原生 js 的入口函数指的是:window.onload = function() {}; 如下:

        //原生 js 的入口函数英超排名。页面上所有内容加载完毕,才执行uedbet官网。  //不仅要等文本加载完毕,而且要等图片也要加载完毕,才执行函数任你博。  window.onload = function () {   alert(1);  }
      原声js入口函数

      jQuery的入口函数,有以下几种写法:

      写法一:文档加载完毕,图片不加载的时候,就可以执行这个函数jrs看球网。

      $(document).ready(function () {   alert(1);  })

      写法二:文档加载完毕,图片不加载的时候,就可以执行这个函数金贝赌场jinbeicasino。(写法一的简洁版)

      $(function () {   alert(1);  });

      写法三:文档加载完毕,图片也加载完毕的时候,在执行这个函数dafabet手机版。

      $(window).ready(function () {   alert(1);  })

      jQuery入口函数与js入口函数的区别

      区别一:书写个数不同:

      • Js 的入口函数只能出现一次,出现多次会存在事件覆盖的问题28365365。

      • jQuery 的入口函数,可以出现任意多次,并不存在事件覆盖问题博狗 娱乐官网欢迎您。

      区别二:执行时机不同:

      • Js的入口函数是在所有的文件资源加载完成后,才执行老k捕鱼达人。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等百家乐资讯网。

      • jQuery的入口函数,是在文档加载完成后,就执行体育在线论坛。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成韦德十佳球高清。

      文档加载的顺序:从上往下,边解析边执行美高梅娱乐sobowang。

      jQuery的$符号

      jQuery 使用 $ 符号原因:书写简洁、相对于其他字符与众不同、容易被记住爱钱进老九门。

      jQuery占用了我们两个变量:$ 和 jQuery外围足球。当我们在代码中打印它们俩的时候:

      <script src="jquery-3.3.1.js"></script><script>  console.log($);  console.log(jQuery);  console.log($===jQuery);</script>

       

      从打印结果可以看出,$ 代表的就是 jQuery万博亚洲下载。

      js中的DOM对象 和 jQuery对象比较(重点,难点)

      二者的区别

      通过 jQuery 获取的元素是一个jq对象数组,其中包含着原生JS中的DOM对象cctv风云足球在线直播。举例:

      针对下面这样一个div结构:

      <div></div><div id="app"></div><div class="box"></div><div class="box"></div><div></div>

      通过原生 js 获取这些元素节点的方式是:

       var myBox = document.getElementById("app");   //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组

      通过 jQuery 获取这些元素节点的方式是:(获取的都是数组)

       //获取的是数组,里面包含着原生 JS 中的DOM对象明升国际。  console.log($('#app'));  console.log($('.box'));  console.log($('div'));

      总结:jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法银河网站。

      二者的相互转换

      1、 DOM 对象 转为 jQuery对象

      $(js对象);

      2、jQuery对象 转为 DOM 对象

       jquery对象[index];  //方式1(推荐) jquery对象.get(index); //方式2

      jQuery对象转换成了 DOM 对象之后,可以直接调用 DOM 提供的一些功能环亚集团。如:

      $('div')[1].style.backgroundColor = 'yellow';$('div')[3].style.backgroundColor = 'green';

      jQuery查找标签

      选择器

      基本选择器、层级选择器、属性选择器

      今天来学习一下jQuery 选择器8波比分。jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素皇冠体育平台。

      基本选择器

      复制代码
      $("#id")   //id选择器$("tagName")  //标签选择器$(".className") //class选择器$("*")   //通用选择器$("div.c1")  // 交集选择器 找到有含有c1类的div标签$("#id, .className, tagName") //并集选择器
      复制代码
      <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style>  div{   float: left;  } </style></head><body> <div></div> <div id="box"></div> <div ></div> <div ></div> <div></div> <script type="text/javascript" src="jquery3.4.1.js"></script> <script type="text/javascript">  //入口函数  $(function(){   //三种方式获取jquery对象   var jqBox1 = $("#box");     var jqBox2 = $(".box");   var jqBox3 = $('div');   //操作标签选择器   jqBox3.css('width', '100');   jqBox3.css('height', 100);   jqBox3.css('background-color', 'red');   jqBox3.css('margin-top', 10);   //操作类选择器(隐式迭代,不用一个一个设置)     jqBox2.css("background", "green");     jqBox2.text('哈哈哈')     //操作id选择器     jqBox1.css("background", "yellow");  }) </script></body></html>
      jquery选择器示例代码

      效果如下:

      层级选择器

      $("x y");// x的所有后代y(子子孙孙)$("x > y");// x的所有儿子y(儿子)$("x + y")// 找到所有紧挨在x后面的y$("x ~ y")// x之后所有的兄弟y
      <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <script>  $(function () {   //获取ul中的li设置为粉色   //后代:儿孙重孙曾孙玄孙....   var jqLi = $("ul li");   jqLi.css("margin", 5);   jqLi.css("background", "pink");   //子代:亲儿子   var jqOtherLi = $("ul>li");   jqOtherLi.css("background", "red");  }); </script></head><body><ul> <li>111</li> <li>222</li> <li>333</li> <ol>  <li>aaa</li>  <li>bbb</li>  <li>ccc</li> </ol></ul></body></html>
      示例代码

      效果如下:

      属性选择器

      复制代码
      $('[href]')  //找所有含href属性的标签$('a[href]')  //找所有含href属性的a标签$('a[title="luffy"]') //找所有title属性是luffy的a标签$('a[title="baidu"]') //找所有title属性不是百度的a标签$('a[href^="https"]') //找所有href属性以https开头的a标签$('a[href$="html"]') //找所有href属性以html结尾的a标签$('a[href*="i"]') //找所有href属性中含有i的a标签$('a[href][title="luffy"]') //找所有含有href属性且title属性=luffy的a标签 
      复制代码
      <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title> </head> <body>   <div id="box">   <h2 >属性元素器</h2>   <!--<p >我是一个段落</p>-->   <ul>    <li id="li1">分手应该体面</li>    <li id="li2">分手应该体面</li>    <li >分手应该体面</li>    <li >分手应该体面</li>   </ul>   <form action="" method="post">    <input name="username" type='text' value="1" checked="checked" />    <input name="username1111" type='text' value="1" />    <input name="username2222" type='text' value="1" />    <input name="username3333" type='text' value="1" />    <button >按钮1</button>    <button >按钮1</button>    <button >按钮1</button>    <button >按钮1</button>   </form>  </div> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript">    $(function(){   //标签名[属性名] 查找所有含有id属性的该标签名的元素   $('li[id]').css('color','red');      //匹配给定的属性是what值得元素   $('li[class=what]').css('font-size','30px');   //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素   $('li[class!=what]').css('font-size','50px');      //匹配给定的属性是以某些值开始的元素   $('input[name^=username]').css('background','gray');   //匹配给定的属性是以某些值结尾的元素   $('input[name$=222]').css('background','greenyellow');      //匹配给定的属性是以包含某些值的元素   $('button[class*=btn]').css('background','red')       })  </script></html>
      示例代码

      效果如下:

       

      筛选器

      基本筛选器

      复制代码
      :first // 第一个:last // 最后一个:eq(index)// 索引等于index的那个元素:even // 匹配所有索引值为偶数的元素,从 0 开始计数:odd // 匹配所有索引值为奇数的元素,从 0 开始计数:gt(index)// 匹配所有大于给定索引值的元素:lt(index)// 匹配所有小于给定索引值的元素:not(元素选择器)// 移除所有满足not条件的标签:has(元素选择器)// 根据含有某个后代筛选
      复制代码
      <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>基本过滤选择器</title> </head> <body>  <ul>   <li>哈哈哈哈,基本过滤选择器</li>   <li>嘿嘿嘿</li>   <li>天王盖地虎</li>   <li>小鸡炖蘑菇</li>     </ul> </body> <script src="jquery-3.3.1.js"></script> <script type="text/javascript">    $(function(){   //获取第一个 :first ,获取最后一个 :last      //奇数   $('li:odd').css('color','red');   //偶数   $('li:even').css('color','green');      //选中索引值为1的元素 *   $('li:eq(1)').css('font-size','30px');      //大于索引值1   $('li:gt(1)').css('font-size','50px');      //小于索引值1   $('li:lt(1)').css('font-size','12px');      })  </script></html>
      示例代码

      效果如下:

      表单筛选器

      复制代码
      type筛选器
      :text:password:file:radio:checkbox:submit:reset:button
      复制代码
      其他属性筛选器:enabled:disabled:checked:selected

      筛选器方法

      复制代码
      //找兄弟$("#id").siblings();// 兄弟们,不包含自己,.siblings('#id'),可以在添加选择器进行进一步筛选//找弟弟$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找,不包含它//找哥哥$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")
      复制代码
      //找祖辈$("#id").parent()$("#id").parents() // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到)$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用万博体育登录。
      //找儿子$("#id").children();// 儿子们
      复制代码
      //过滤
      $("div").first() // 获取匹配的第一个元素$("div").last() // 获取匹配的最后一个元素$("div").eq(n) // 索引值等于指定值的元素,n是索引$("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素$("div").find("p") //后代选择器,在所有div标签中找后代的p标签$("div").filter(".c1") // 交集选择器,从结果集中过滤出有c1样式类的$("div").has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素大赢家足球即时比分。
      复制代码
      <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title> </head> <body>   <div id="box">   <p >    <span>我是第一个span标签</span>    <span>我是第二个span标签</span>    <span>我是第三个span标签</span>   </p>   <button>按钮</button>  </div>  <ul>   <li >2</li>   <li>3</li>   <li>4</li>   <li>5</li>  </ul> </body> <script src="jquery-3.2.1.js"></script> <script type="text/javascript">    //获取第n个元素 数值从0开始  $('span').eq(1).css('color','#FF0000');    //获取第一个元素 :first :last 点语法 :get方法 和set方法  $('span').last().css('color','greenyellow');  $('span').first().css('color','greenyellow');    //查找span标签的父元素(亲的)  $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});    //选择所有的兄弟元素(不包括自己)     $('.list').siblings('li').css('color','red');         //查找所有的后代元素     $('div').find('button').css('background','yellow');        //不写参数代表获取所有子元素比分直播188。     $('ul').children().css("background", "green");     $('ul').children("li").css("margin-top", 10);          </script></html>
      示例代码

      效果如下:

      jQuery绑定事件(更多)

      为button按钮绑定单击事件,单机按钮弹出警告框
      $('button').click( function () { alert('wahaha') })

      jQuery操作标签

      标签内文本操作

      html 标签元素中所有的内容

      //获取值:获取选中标签元素中所有的内容$('#box').html(); //设置值:设置该元素的所有内容 会替换掉 标签中原来的内容$('#box').html('<a href="https://www. ">百度一下</a>'); 

      text 标签元素的文本内容

      //获取值:获取选中标签元素中的文本内容$('#box').text();//设置值:设置该所有的文本内容$('#box').text('<a href="https://www. ">百度一下</a>');

      注意:text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中 

      文档标签操作

      之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作宝贝心水论坛。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果百人斗牛牛。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档ued官方。

      看一个之前我们js操作DOM的例子:

      var oUl = document.getElementsByTagName('ul')[0];var oLi = document.createElement('li');oLi.innerHTML = '赵云';oUl.appendChild(oLi);

      插入标签

      append和appendTo
      //追加某元素,在父元素中添加新的子元素买足球彩票用什么软件好。子元素可以为:stirng | element(js对象) | jquery元素父元素.append(子元素)
      //追加到某元素,子元素添加到父元素子元素.appendTo(父元素)
      复制代码
      //appendvar oli = document.createElement('li');oli.innerHTML = '哈哈哈';$('ul').append('<li>1233</li>');$('ul').append(oli);$('ul').append($('#app'));//appendTo$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
      复制代码

      PS:如果追加的jquery对象原本在文档树中,那么这些元素将从原位置上消失uedbet体育。简言之,就是移动操作欧洲杯直播网站。

      prepend和prependTo
      // 前置添加, 添加到父元素的第一个位置父元素.prepend(子元素);// 前置添加, 添加到父元素的第一个位置子元素.prependTo(父元素);
      // prepand$('ul').prepend('<li>我是第一个</li>')// prependTo$('<a href="#">路飞学诚</a>').prependTo('ul')
      after和insertAfter
      复制代码
      // 在匹配的元素之后插入内容 兄弟元素.after(要插入的兄弟元素);要插入的兄弟元素.inserAfter(兄弟元素);$('ul').after('<h4>我是一个h3标题</h4>')$('<h5>我是一个h2标题</h5>').insertAfter('ul')
      复制代码
      before和insertBefore
      复制代码
      // 在匹配的元素之前插入内容兄弟元素.before(要插入的兄弟元素);要插入的兄弟元素.inserBefore(兄弟元素); //示例$('ul').before('<h3>我是一个h3标题</h3>')$('<h2>我是一个h2标题</h2>').insertBefore('ul')
      复制代码

      删除标签 remove、detach和empty

      复制代码
      //删除节点后,事件也会删除(简言之,删除了整个标签)$(selector).remove(); // 删除节点后,事件会保留$(selector).detach(); // 清空选中元素中的所有后代节点$(selector).empty(); 
      复制代码复制代码
      // remove$('ul').remove();// detachvar $btn = $('button').detach()$('ul').append($btn) //此时按钮能追加到ul中//empty$('ul').empty() //清空掉ul中的子元素,保留ul
      复制代码

      修改标签 replaceWith和replaceAll

      // selector被替换:将所有匹配的元素替换成指定的string、js对象、jquery对象九洲娱乐网。$(selector).replaceWith(content);// selector被替换:将所有的匹配的元素替换成p标签爱波网。$('<p>哈哈哈</p>')replaceAll(selector);
      // replaceWith $('h5').replaceWith('<a href="#">hello world</a>') //将所有的h5标题替换为a标签$('h5').replaceWith($('#app')); //将所有h5标题标签替换成id为app的dom元素// replaceAll$('<br/><hr/><button>按钮</button>').replaceAll('h4')

      克隆标签 clone

      // 克隆匹配的DOM元素$(选择器).clone();
      $('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()

      复制代码
      // 查看属性$(selector).prop(property)// 设置属性$(selector).prop(property,value)// 设置多个属性$(selector).prop({property:value, property:value,...})
      复制代码复制代码
      $('input').attr('checked')"checked"$('input').prop('checked')true$('input').prop('cheched',false) //设置取消选中
      复制代码
      <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button id="all">全选</button><button id="reverse">反选</button><button id="cancel">取消</button><table border="1"> <thead> <tr>  <th>#</th>  <th>姓名</th>  <th>爱好</th> </tr> </thead> <tbody> <tr>  <td><input type="checkbox"></td>  <td>金老板</td>  <td>开车</td> </tr> <tr>  <td><input type="checkbox"></td>  <td>alex</td>  <td>抽烟、喝酒、烫头</td> </tr> <tr>  <td><input type="checkbox"></td>  <td>苑昊(苑局)</td>  <td>不洗头、不翻车、不要脸</td> </tr> </tbody></table><script src="jquery3.4.1.js"></script><script> // 点击全选按钮 选中所有的checkbox // DOM绑定事件方法 // $("#all")[0].onclick = function(){} // jQuery绑定事件方法 $("#all").click(function () {  $(":checkbox").prop('checked', true); }); // 取消 $("#cancel").on("click", function () {   $(":checkbox").prop('checked', false); }); // 反选 $("#reverse").click(function () {  // 1. 找到所有选中的checkbox取消选中  // $("input:checked").prop('checked', false);  // // 2. 找到没有选中的checkbox选中  // $("input:not(:checked)").prop('checked', true);  //你会发现上面这么写,不行,为什么呢?因为你做了第一步操作之后,再做第二步操作的时候,所有标签就已经全部取消选中了,所以第二步就把所有标签选中了  // 方法1. for循环所有的checkbox,挨个判断原来选中就取消选中,原来没选中就选中  var $checkbox = $(":checkbox");  for (var i=0;i<$checkbox.length;i++){   // 获取原来的选中与否的状态   var status = $($checkbox[i]).prop('checked');   $($checkbox[i]).prop('checked', !status);  }  // 方法2. 先用变量把标签原来的状态保存下来 //  var $unchecked = $("input:not(:checked)"); //  var $checked = $("input:checked"); // //  $unchecked.prop('checked', true); //  $checked.prop('checked', false); })</script></body></html>
      表格全选、反选示例

      class类属性

      addClass添加类名

      // 为每个匹配的元素添加指定的类名百家乐官网。$('div').addClass("box");//追加一个$('div').addClass("box box2");//追加多个

      removeClass移除类名

      // 从所有匹配的元素中删除全部或者指定的类hg0088皇冠。$('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="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css">  .active{   color: red;  } </style></head><body>  <ul>   <li >张三</li>   <li >李四</li>   <li >王五</li>  </ul>  <script type="text/javascript" src="jquery-3.3.1.js"></script>  <script type="text/javascript">   $(function(){    $('ul li').click(function(){     // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象     $(this).addClass('active').siblings('li').removeClass('active');    })   })  </script> </body></html>
      实际示例

      toggleClass类的切换

      复制代码
      // 如果存在(不存在)就删除(添加)一个类zhibo 8。$('div').toggleClass('box')$('span').click(function(){ //动态的切换class类名为active $(this).toggleClass('active')})
      复制代码

      val 表单控件value属性

      // 获取值:用于表单控件中获取值,比如input textarea select等等$(selector).val()// 设置值:$('input').val('设置了表单控件中的值');
      <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <form action="">   <input type="radio" name="sex" value="112" />男   <!-- 设置cheked属性表示选中当前选项 -->   <input type="radio" name="sex" value="11" checked="" />女   <input type="radio" name="sex" value="11" />gay   <input type="checkbox" value="a" checked=""/>吃饭   <input type="checkbox" value="b" />睡觉   <input type="checkbox" value="c" checked=""/>打豆豆 <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->   <select name="timespan" id="timespan" >    <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="111" /> </form></body><script type="text/javascript" src="jquery3.4.1.js"></script> <script type="text/javascript">  $(function(){   // 一、获取值    //1.获取单选框被选中的value值    console.log($('input[type=radio]:checked').val())    //2.复选框被选中的value,获取的是第一个被选中的值    console.log($('input[type=checkbox]:checked').val())    //3.下拉列表被选中的值    var obj = $("#timespan option:selected");    // 获取被选中的值    var time = obj.val();    console.log(time);    // 获取文本    var time_text = obj.text();    console.log("val:"+time+" text"+ time_text );    //4.获取文本框的value值    console.log($("input[type=text]").val())//获取文本框中的值    // 二.设置值    //1.设置单选按钮和多选按钮被选中项    $('input[type=radio]').val(['112']);    $('input[type=checkbox]').val(['a','b']);    //2.设置下拉列表框的选中值,必须使用select    /*因为option只能设置单个值,当给select标签设置multiple博狗备用。    那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以    */    $('select').val(['3','2'])    //3.设置文本框的value值    $('input[type=text]').val('试试就试试')  }) </script></html>
      示例

      css样式

      // css(直接修改css的属性来修改样式)$("div").css('color'); //获取$("p").css("color", "red"); //设置$("p").css({"color":"red","background-color":"yello"}); // 设置多个

      盒子样式属性

      内容 : 宽度(width)和高度(height)

      复制代码
      // 宽度.width() //获取宽度 返回匹配元素中第一个元素的宽,一个没有单位的数值.width( value ) //设置宽度//高度.height() //获取高度 返回匹配元素中第一个元素的高,一个没有单位的数值.height( value ) //设置高度
      复制代码

      内容+padding : 宽度(innerWidth)和高度(innerHeight)

      复制代码
      // 内部宽.innerWidth() // 获取.innerWidth(value);//设置// 内部高.innerHeight() // 获取.innerHeight(value); //设置
      复制代码

      内容+padding+border : 宽度(outerWidth)和高度(outerHeight)

      复制代码
      // 外部宽 .outerWidth() //获取第一个匹配元素 :内容+padding+border的宽 .outerWidth(true) //获取第一个匹配元素:内容+padding+border+margin的宽 .outerWidth(value) //设置多个,调整的是“内容”的宽//外部高 .outerHeight() //第一个匹配元素:获取内容+padding+border的高 .outerHeight(true) //第一个匹配元素:获取内容+padding+border+margin的高 .outerHeight( value ) //设置多个,调整的是“内容”的高
      复制代码

      滚动条距离属性

      复制代码
      // 水平方向.scrollLeft()  //获取.scrollLeft( value )//设置// 垂直方向.scrollTop() //获取.scrollTop( value ) //设置
      复制代码

      jQuery动画效果

      jQuery提供的一组网页中常见的动画效果,这些动画是标准的、有规律的效果;同时还提供给我们了自定义动画的功能万博manbetx平台。

      显示动画

      方式一:无参数,表示让指定的元素直接显示出来足彩开户。其实这个方法的底层就是通过display: block;实现的杏彩论坛。

       $("div").show();

      方式二:通过控制元素的宽高、透明度、display属性,逐渐显示,例如:3秒后显示完毕英超排名。

      $('div').show(3000);

      方式三:和方式二类似,也是通过控制元素的宽高、透明度、display属性,逐渐显示uedbet官网。

       $("div").show("slow");
      slow 慢:600msnormal 正常:400msfast 快:200ms
      参数说明

      方式四:动画执行完后,立即执行回调函数任你博。

       //show(毫秒值,回调函数; $("div").show(5000,function () {  alert("动画执行完毕!"); });

      总结:上面的四种方式几乎一致:参数可以有两个,第一个是动画的执行时长,第二个是动画结束后执行的回调函数jrs看球网。

      隐藏动画

      方式参照上面的show()方法的方式金贝赌场jinbeicasino。如下:

      复制代码复制代码
       $(selector).hide(); $(selector).hide(1000);  $(selector).hide("slow"); $(selector).hide(1000, function(){});
      复制代码复制代码

      练习 : 实现点击按钮显示盒子,再点击按钮隐藏盒子

      <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">   #box{    width: 200px;    height: 200px;    background-color: green;    border: 1px solid red;    display: none;   }  </style> </head> <body>  <div id="box">    </div>  <button id="btn">隐藏</button>  </body> <script src="jquery-3.3.1.js"></script>  <script type="text/javascript">    //jquery 提供了一些方法 show() hide() 控制元素显示隐藏  var isShow = true;  $('#btn').click(function(){   if(isShow){    $('#box').show('slow',function(){     $(this).text('盒子出来了');        $('#btn').text('显示');     isShow = false;    })   }else{    $('#box').hide(2000,function(){     $(this).text('');      $('#btn').text('隐藏');     isShow = true;         })   }  })    </script></html> 
      实现点击按钮显示盒子,再点击按钮隐藏盒子

      开关式显示隐藏动画

      $('#box').toggle(3000,function(){});

      显示和隐藏的来回切换采用的是toggle()方法:就是先执行show(),再执行hide()dafabet手机版。

      代码如下:

      复制代码
       $('#btn').click(function(){   $('#box').toggle(3000,function(){    $(this).text('盒子出来了');     if ($('#btn').text()=='隐藏') {     $('#btn').text('显示');     }else{     $('#btn').text('隐藏');     }   });  })
      复制代码

      滑入和滑出

      1、滑入动画效果:(类似于生活中的卷帘门):下拉动画,显示元素28365365。

      $(selector).slideDown(speed, 回调函数);

      注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp)

      2、滑出动画效果: 上拉动画,隐藏元素博狗 娱乐官网欢迎您。

       $(selector).slideUp(speed, 回调函数);

      3、滑入滑出切换动画效果:

       $(selector).slideToggle(speed, 回调函数);

      代码如下:

      <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>  div {   width: 300px;   height: 300px;   display: none;   background-color: green;  } </style> <script src="jquery-3.3.1.js"></script> <script>  $(function () {   //点击按钮后产生动画   $("button:eq(0)").click(function () {    //滑入动画: slideDown(毫秒值,回调函数[显示完毕执行什么]);    $("div").slideDown(2000, function () {     alert("动画执行完毕!");    });   })   //滑出动画   $("button:eq(1)").click(function () {    //滑出动画:slideUp(毫秒值,回调函数[显示完毕后执行什么]);    $("div").slideUp(2000, function () {     alert("动画执行完毕!");    });   })   $("button:eq(2)").click(function () {    //滑入滑出切换(同样有四种用法)    $("div").slideToggle(1000);   })  }) </script></head><body><button>滑入</button><button>滑出</button><button>切换</button><div></div></body></html>
      示例

      淡入淡出动画

      1、淡入动画效果:让元素以淡淡的进入视线的方式展示出来老k捕鱼达人。

       $(selector).fadeIn(speed, callback);

      2、淡出动画效果:让元素以渐渐消失的方式隐藏起来

      $(selector).fadeOut(1000);

      3、淡入淡出切换动画效果:通过改变透明度,切换匹配元素的显示或隐藏状态皇家88娱乐平台。

       $(selector).fadeToggle('fast', callback);

      参数的含义同show()方法万博宣伟公关公司。

      代码如下:

      <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>  div {   width: 300px;   height: 300px;   display: none;   /*透明度*/   opacity: 0.5;   background-color: red;  } </style> <script src="jquery-3.3.1.js"></script> <script>  $(function () {   //点击按钮后产生动画   $("button:eq(0)").click(function () {//    //淡入动画用法1: fadeIn(); 不加参数    $("div").fadeIn();//    //淡入动画用法2: fadeIn(2000); 毫秒值//    $("div").fadeIn(2000);//    //通过控制 透明度和display    //淡入动画用法3: fadeIn(字符串); slow慢:600ms normal正常:400ms fast快:200ms//    $("div").fadeIn("slow");//    $("div").fadeIn("fast");//    $("div").fadeIn("normal");    //淡入动画用法4: fadeIn(毫秒值,回调函数[显示完毕执行什么]);//    $("div").fadeIn(5000,function () {//     alert("动画执行完毕!");//    });   })   //滑出动画   $("button:eq(1)").click(function () {//    //滑出动画用法1: fadeOut(); 不加参数    $("div").fadeOut();//    //滑出动画用法2: fadeOut(2000); 毫秒值//    $("div").fadeOut(2000); //通过这个方法实现的:display: none;//    //通过控制 透明度和display    //滑出动画用法3: fadeOut(字符串); slow慢:600ms normal正常:400ms fast快:200ms//    $("div").fadeOut("slow");//    $("div").fadeOut("fast");//    $("div").fadeOut("normal");    //滑出动画用法1: fadeOut(毫秒值,回调函数[显示完毕执行什么]);//    $("div").fadeOut(2000,function () {//     alert("动画执行完毕!");//    });   })   $("button:eq(2)").click(function () {    //滑入滑出切换    //同样有四种用法    $("div").fadeToggle(1000);   })   $("button:eq(3)").click(function () {    //改透明度    //同样有四种用法    $("div").fadeTo(1000, 0.5, function () {     alert(1);    });   })  }) </script></head><body><button>淡入</button><button>淡出</button><button>切换</button><button>改透明度为0.5</button><div></div></body></html>
      示例

      自定义动画

      语法:

       $(selector).animate({params}, speed, callback);

      作用:执行一组CSS属性的自定义动画金贝赌场jinbeicasino。

      • 第一个参数表示:要执行动画的CSS属性(必选)

      • 第二个参数表示:执行动画时长(可选)

      • 第三个参数表示:动画执行完后,立即执行的回调函数(可选)

      代码如下:

      <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>  div {   position: absolute;   left: 20px;   top: 30px;   width: 100px;   height: 100px;   background-color: green;  } </style> <script src="jquery-3.3.1.js"></script> <script>  jQuery(function () {   $("button").click(function () {    var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};    var json2 = {     "width": 100,     "height": 100,     "left": 100,     "top": 100,     "border-radius": 100,     "background-color": "red"    };    //自定义动画    $("div").animate(json, 1000, function () {     $("div").animate(json2, 1000, function () {      alert("动画执行完毕!");     });    });   })  }) </script></head><body><button>自定义动画</button><div></div></body></html>
      示例

      停止动画

      $(selector).stop(true, false);
      第一个参数:true:后续动画不执行足彩开户。false:后续动画会执行hg0088新2网址。第二个参数:true:立即执行完成当前动画博狗体育。false:立即停止当前动画乐博现金。
      参数说明

      PS:参数如果都不写,默认两个都是false水果机71966澳门永利平台。实际工作中,直接写stop()用的多球皇体育直播。

      <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css">  * {   margin: 0;   padding: 0;  }  ul {   list-style: none;  }  .wrap {   width: 330px;   height: 30px;   margin: 100px auto 0;   padding-left: 10px;   background-color: pink;  }  .wrap li {   background-color: green;  }  .wrap > ul > li {   float: left;   margin-right: 10px;   position: relative;  }  .wrap a {   display: block;   height: 30px;   width: 100px;   text-decoration: none;   color: #000;   line-height: 30px;   text-align: center;  }  .wrap li ul {   position: absolute;   top: 30px;   display: none;  } </style> <script src="jquery-3.3.1.js"></script> <script>  //入口函数  $(document).ready(function () {   //需求:鼠标放入一级li中,让他里面的ul显示皇冠体育网址导航。移开隐藏ttyule。   var jqli = $(".wrap>ul>li");   //绑定事件   jqli.mouseenter(function () {    $(this).children("ul").stop().slideDown(1000);   });   //绑定事件(移开隐藏)   jqli.mouseleave(function () {    $(this).children("ul").stop().slideUp(1000);   });  }); </script></head><body><div > <ul>  <li>   <a href="javascript:void(0);">一级菜单1</a>   <ul>    <li><a href="javascript:void(0);">二级菜单2</a></li>    <li><a href="javascript:void(0);">二级菜单3</a></li>    <li><a href="javascript:void(0);">二级菜单4</a></li>   </ul>  </li>  <li>   <a href="javascript:void(0);">二级菜单1</a>   <ul>    <li><a href="javascript:void(0);">二级菜单2</a></li>    <li><a href="javascript:void(0);">二级菜单3</a></li>    <li><a href="javascript:void(0);">二级菜单4</a></li>   </ul>  </li>  <li>   <a href="javascript:void(0);">三级菜单1</a>   <ul>    <li><a href="javascript:void(0);">三级菜单2</a></li>    <li><a href="javascript:void(0);">三级菜单3</a></li>    <li><a href="javascript:void(0);">三级菜单4</a></li>   </ul>  </li> </ul></div></body></html>
      示例:鼠标悬停,弹出下拉菜单

      上方代码中,关键的地方在于,用了stop函数,再执行动画前,先停掉之前的动画球探篮球比分。

      jQuery的事件操作

      1、绑定事件

      bind(type,data,fn)

      描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数8波比分。

      type (String) : 事件类型data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数
      参数说明

      示例:当每个p标签被点击的时候,弹出其文本

      $("p").bind("click", function(){ alert( $(this).text() );});

      你可以在事件处理之前传递一些附加的数据皇冠体育平台。

      function handler(event) {//event.data 可以获取bind()方法的第二个参数的数据 alert(event.data.foo);}$("p").bind("click", {foo: "bar"}, handler)

      常见事件:

      复制代码
      click(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})change(function(){...}) //内容发生变化,input,select等keyup(function(){...}) mouseover/mouseoutmouseenter/mouseleavemouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象
      复制代码

      通过返回false来取消默认的行为并阻止事件起泡万博体育登录。

      $("form").bind("submit", function() { return false; })

      或通过event.preventDefault() 方法阻止事件起泡

      $("form").bind("submit", function(event){ event.stopPropagation();});

      2、解绑事件

      unbind(type,fn);

      描述:bind()的反向操作,从每一个匹配的元素中删除绑定的事件大赢家足球即时比分。

        如果没有参数,则删除所有绑定的事件beloved什么意思。

        如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除宝贝心水论坛。

      type (String) : (可选) 事件类型fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
      参数说明

      示例:把所有段落的所有事件取消绑定

      $("p").unbind()

      将段落的click事件取消绑定

      $("p").unbind( "click" )

      3.补充 一次性事件

      one(type,data,fn)

      描述:为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数百人斗牛牛。在每个对象上,这个事件处理函数只会被执行一次ued官方。其他规则与bind()函数相同

      type (String) : 事件类型data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
      参数说明

      示例:当所有段落被第一次点击的时候,显示所有其文本买足球彩票用什么软件好。

      $("p").one("click", function(){//只有第一次点击的时候才会触发,再次点击不会触发了 alert( $(this).text() );});

      4.事件委托(事件代理)

      通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件uedbet体育。
      举个列子:有三个同事预计会在周一收到快递欧洲杯直播网站。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收九洲娱乐网。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)爱波网。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款百家乐官网。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收macauslot。

      原理:利用冒泡的原理,把事件加到父级上,触发执行效果千亿国际娱乐。

      作用:

      1.性能要好
      2.针对新创建的元素,直接可以拥有事件

      事件源 :

        跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的

      使用情景:

        ?为DOM中的很多元素绑定相同事件;
        ?为DOM中尚不存在的元素绑定事件;

      <body>  <ul>   <li >路飞</li>   <li>路飞</li>   <li>路飞</li>     </ul></body><script src="jquery-3.2.1.js"></script><script type="text/javascript">$(document).ready(function(){  //通过on()方法  $('ul').on('click','#namei,.luffy',function(){  console.log(this);  })    //未来追加的元素  $('ul').append('<a id="namei">娜美</a>')}</script>
      示例

      语法:在选定的元素上绑定一个或多个事件处理函数

      on(type,selector,data,fn);
      events( String) : 一个或多个空格分隔的事件类型selector( String) : 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素data: 当一个事件被触发时,要传递给事件处理函数的event.datahg1088.com。fn:回调函数
      参数说明

      示例

      <!DOCTYPE html><html lang="zh "><head> <meta charset="UTF-8"> <meta http-equiv="x-ua patible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录注册示例</title> <style> .error {  color: red; } </style></head><body><form id="myForm"> <label for="name">姓名</label> <input type="text" id="name"> <span ></span> <label for="passwd">密码</label> <input type="password" id="passwd"> <span ></span> <input type="submit" id="modal-submit" value="登录"></form><script src="jquery3.4.1.js"></script><script> function myValidation() { // 多次用到的jQuery对象存储到一个变量,避免重复查询文档树 var $myForm = $("#myForm"); $myForm.find(":submit").on("click", function () {  // 定义一个标志位,记录表单填写是否正常  var flag = true;  $myForm.find(":text, :password").each(function () {  var val = $(this).val();  if (val.length <= 0 ){   var labelName = $(this).prev("label").text();   $(this).next("span").text(labelName + "不能为空");   flag = false;  }  });  return flag; }); // input输入框获取焦点后移除之前的错误提示信息 $myForm.find("input[type!='submit']").on("blur", function () {  $(this).next(".error").text(""); }) } myValidation()</script></body></html>
      表单验证
      <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>  .cover {   position: fixed;   top: 0;   right: 0;   bottom: 0;   left: 0;   background-color: rgba(0, 0, 0, 0.3);   z-index: 99;  }  .modal {   width: 300px;   height: 200px;   background-color: white;   position: absolute;   top: 50%;   left: 50%;   margin-top: -100px;   margin-left: -150px;   z-index: 1000;  }  .hide {   display: none;  } </style> <script src="jquery3.4.1.js"></script></head><body><button id="add">新增</button><table border="1"> <thead> <tr>  <th>#</th>  <th>姓名</th>  <th>爱好</th>  <th>操作</th> </tr> </thead> <tbody> <tr>  <td><input type="checkbox"></td>  <td>金老板</td>  <td>开车</td>  <td>   <button >开除</button>  </td> </tr> <tr>  <td><input type="checkbox"></td>  <td>alex</td>  <td>抽烟、喝酒、烫头</td>  <td>   <button >开除</button>  </td> </tr> <tr>  <td><input type="checkbox"></td>  <td>苑昊(苑局)</td>  <td>不洗头、不翻车、不要脸</td>  <td>   <button >开除</button>  </td> </tr> </tbody></table><div ></div><div > <div>  <label>姓名:   <input type="text" id="name">  </label> </div> <div>  <label>爱好:   <input type="text" id="hobby">  </label> </div> <button id="cancel" type="button">取消</button> <button id="submit" type="button">提交</button></div><script> // 定义一个清空输入框并且隐藏模态框的方法 function hideModal(){   // 1. 清空input的值  $("#name,#hobby").val('');  // 2. 隐藏起来  $(".cover,.modal").addClass('hide'); } // 开除按钮的功能 $("table").on('click', '.fire', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子,事件里面都是用的匿名函数,这里用on是因为我们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件  // 点击开除按钮要做的事儿————把当前行移除掉  //this --> 触发当前点击事件的DOM对象  $(this).parent().parent().remove(); // 链式操作 }); // 新增按钮的功能 $("#add").click(function () {  // 点击新增按钮要做的事儿  // 1. 移除cover和modal的hide样式  $(".cover,.modal").removeClass('hide'); }); // 点击modal中的cancel按钮 $("#cancel").click(function () {  hideModal(); }); // 点击modal中的submit按钮 $("#submit").click(function () {  // 1. 获取用户输入的值  var name = $("#name").val();  var hobby = $("#hobby").val();  // 2. 隐藏模态框,清空输入框  hideModal();  // 3. 创建一个tr标签,把数据塞进去  var trEle = document.createElement("tr");  $(trEle).append('<td><input type="checkbox"></td>');  $(trEle).append('<td>' + name + '</td>');  var tdTmp = document.createElement('td');  tdTmp.innerText = hobby;  $(trEle).append(tdTmp);  $(trEle).append('<td><button >开除</button></td>')  // 4. 把上一步的tr追加到表格的tbody后面  $('tbody').append(trEle); });  //先用下面这种方式写,你会发现一些问题,我们新添加的每一行数据里面的那个button标签点击删除的时候没有效果 // // 点击modal中的submit按钮 // $("#submit").on('click', function () { #这个和直接$('submit').click(function ...)是一样的 //  // 1. 获取用户输入的值 //  var name = $("#name").val(); //  var hobby = $("#hobby").val(); //  // 2. 隐藏模态框,清空输入框 //  hideModal(); //  // 3. 创建一个tr标签,把数据塞进去 //  var trEle = document.createElement("tr"); //  $(trEle).append('<td><input type="checkbox"></td>'); //  $(trEle).append('<td>' + name + '</td>'); //  var tdTmp = document.createElement('td'); //  tdTmp.innerText = hobby; //  $(trEle).append(tdTmp); //  $(trEle).append('<td><button >开除</button></td>') //  // 4. 把上一步的tr追加到表格的tbody后面 //  $('tbody').append(trEle); // })</script></body></html>
      表格操作

       

      补充内容:

      jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件、jqueryUI知识点

      jqueryUI 官网:

      https://jqueryui /

      jqueryUI 中文网:

      官网demo:

      https://www.oschina /project/tag/273/jquery

      里面包含了jquery插件效果和实现代码,大家可以好好的玩一下了!