UDN-企业互联网技术人气社区

板块导航

浏览  : 729
回复  : 2

[jQuery] 玩转Jquery,告别前端知道思路忘记知识点的痛苦

[复制链接]
芭芭拉的头像 楼主
发表于 2016-12-31 16:07:55 | 显示全部楼层 |阅读模式
  本章借鉴与http://JavaScript.ruanyifeng.com/

  • jquery简介
  • 查找元素
  • 事件绑定

  Jquery简介

  jQuery是目前使用最广泛的JavaScript函数库。据 统计 ,全世界57.5%的网站使用jQuery,在使用JavaScript函数库的网站中,93.0%使用jQuery。它已经成了开发者必须学会的技能。

  jQuery的最大优势有两个。首先,它基本是一个DOM操作工具,可以使操作DOM对象变得异常容易。其次,它统一了不同浏览器的API接口,使得代码在所有现代浏览器均能运行,开发者不用担心浏览器之间的差异。

  jQuery最重要的概念,就是 jQuery 对象。它是一个全局对象,可以简写为美元符号 $ 。也就是说, jQuery 和 $ 两者是等价的。

  在网页中加载jQuery函数库以后,就可以使用jQuery对象了。jQuery的全部方法,都定义在这个对象上面。
  1. var listItems = jQuery('li');
  2. // or
  3. var listItems = $('li');
复制代码

  上面两行代码是等价的,表示选中网页中所有的 li 元素。

  Jqeury查找元素

  选择器选出一组符合条件的网页元素以后,jQuery提供了许多方法,可以过滤结果集,返回更准确的目标。

  1、结果集的过滤方法

  (1)first方法,last方法

  first方法返回结果集的第一个成员,last方法返回结果集的最后一个成员
  1. $("li").first()

  2. $("li").last()
复制代码

  (2)next方法,prev方法

  next方法返回紧邻的下一个同级元素,prev方法返回紧邻的上一个同级元素。
  1. $("li").first().next()
  2. $("li").last().prev()

  3. $("li").first().next('.item')
  4. $("li").last().prev('.item')
复制代码

  如果 next 方法和 prev 方法带有参数,表示选择符合该参数的同级元素。

  (3)parent方法,parents方法,children方法

  parent方法返回当前元素的父元素,parents方法返回当前元素的所有上级元素(直到html元素)。
  1. $("p").parent()
  2. $("p").parent(".selected")

  3. $("p").parents()
  4. $("p").parents("div")
  5. children方法返回选中元素的所有子元素。

  6. $("div").children()
  7. $("div").children(".selected")

  8. // 下面的写法结果相同,但是效率较低

  9. $('div > *')
  10. $('div > .selected')
复制代码

  (4)siblings方法,nextAll方法,prevAll方法

  siblings方法返回当前元素的所有同级元素。
  1. $('li').first().siblings()
  2. $('li').first().siblings('.item')
复制代码

  nextAll方法返回当前元素其后的所有同级元素,prevAll方法返回当前元素前面的所有同级元素。
  1. $('li').first().nextAll()
  2. $('li').last().prevAll()
复制代码

  (5)closest方法,find方法

  closest方法返回当前元素,以及当前元素的所有上级元素之中,第一个符合条件的元素。find方法返回当前元素的所有符合条件的下级元素。
  1. $('li').closest('div')
  2. $('div').find('li')
复制代码

  上面代码中的find方法,选中所有div元素下面的li元素,等同于$(‘li’, ‘div’)。由于这样写缩小了搜索范围,所以要优于$(‘div li’)的写法。

  (6)find方法,add方法,addBack方法,end方法

  add方法用于为结果集添加元素。
  1. $('li').add('p')
复制代码

  addBack方法将当前元素加回原始的结果集。
  1. $('li').parent().addBack()
复制代码

  (7)filter方法,not方法,has方法

  filter方法用于过滤结果集,它可以接受多种类型的参数,只返回与参数一致的结果。
  1. // 返回符合CSS选择器的结果
  2. $('li').filter('.item')

  3. // 返回函数返回值为true的结果
  4. $("li").filter(function(index) {
  5.     return index % 2 === 1;
  6. })

  7. // 返回符合特定DOM对象的结果
  8. $("li").filter(document.getElementById("unique"))

  9. // 返回符合特定jQuery实例的结果
  10. $("li").filter($("#unique"))
复制代码

  not 方法的用法与 filter 方法完全一致,但是返回相反的结果,即过滤掉匹配项。
  1. $('li').not('.item')
复制代码

  has方法与filter方法作用相同,但是只过滤出子元素符合条件的元素。
  1. $("li").has("ul")
复制代码

  (8)表单选择器
  1. $(":input")      //匹配所有 input, textarea, select 和 button 元素
  2. $(":text")       //所有的单行文本框
  3. $(":password")   //所有密码框
  4. $(":radio")      //所有单选按钮
  5. $(":checkbox")   //所有复选框
  6. $(":submit")     //所有提交按钮
  7. $(":reset")      //所有重置按钮
  8. $(":button")     //所有button按钮
  9. $(":file")       //所有文件域

  10. $("input:checked")    //所有选中的元素
  11. $("select option:selected")    //select中所有选中的option元素
复制代码

  2、DOM相关方法

  许多方法可以对DOM元素进行处理。

  (1)html方法和text方法

  html方法返回该元素包含的HTML代码,text方法返回该元素包含的文本。

  假定网页只含有一个p元素。
  1. <p><em>Hello World!</em></p>
复制代码

  html方法和text方法的返回结果分别如下。
  1. $('p').html()
  2. // <em>Hello World!</em>

  3. $('p').text()
  4. // Hello World!
复制代码

  jQuery的许多方法都是取值器(getter)与赋值器(setter)的合一,即取值和赋值都是同一个方法,不使用参数的时候为取值器,使用参数的时候为赋值器。

  上面代码的html方法和text方法都没有参数,就会当作取值器使用,取回结果集的第一个元素所包含的内容。如果对这两个方法提供参数,就是当作赋值器使用,修改结果集所有成员的内容,并返回原来的结果集,以便进行链式操作。
  1. $('p').html('<strong>你好</strong>')
  2. // 网页代码变为<p><strong>你好</strong></p>

  3. $('p').text('你好')
  4. // 网页代码变为<p>你好</p>
复制代码

  下面要讲到的jQuery其他许多方法,都采用这种同一个方法既是取值器又是赋值器的模式。

  html方法和text方法还可以接受一个函数作为参数,函数的返回值就是网页元素所要包含的新的代码和文本。这个函数接受两个参数,第一个是网页元素在集合中的位置,第二个参数是网页元素原来的代码或文本。
  1. $('li').html(function (i, v){
  2.     return (i + ': ' + v);        
  3. })

  4. // <li>Hello</li>
  5. // <li>World</li>
  6. // 变为
  7. // <li>0: Hello</li>
  8. // <li>1: World</li>
复制代码

  (2)addClass方法,removeClass方法,toggleClass方法

  addClass方法用于添加一个类,removeClass方法用于移除一个类,toggleClass方法用于折叠一个类(如果无就添加,如果有就移除)。
  1. $('li').addClass('special')
  2. $('li').removeClass('special')
  3. $('li').toggleClass('special')
复制代码

  (3)css方法

  css方法用于改变CSS设置。

  该方法可以作为取值器使用。
  1. $('h1').css('fontSize');
复制代码

  css方法的参数是css属性名。这里需要注意,CSS属性名的CSS写法和DOM写法,两者都可以接受,比如font-size和fontSize都行。

  css方法也可以作为赋值器使用。
  1. $('li').css('padding-left', '20px')
  2. // 或者
  3. $('li').css({
  4.   'padding-left': '20px'
  5. });
复制代码

  上面两种形式都可以用于赋值,jQuery赋值器基本上都是如此。

  (4)val方法

  val方法返回结果集第一个元素的值,或者设置当前结果集所有元素的值。
  1. $('input[type="text"]').val()
  2. $('input[type="text"]').val('new value')
复制代码

  (5)prop方法,attr方法

  首先,这里要区分两种属性。

  一种是网页元素的属性,比如 a 元素的 href 属性、 img 元素的 src 属性。这要使用 attr 方法读写。
  1. // 读取属性值
  2. $('textarea').attr(name)

  3. //写入属性值
  4. $('textarea').attr(name, val)
复制代码

  下面是通过设置 a 元素的 target 属性,使得网页上的外部链接在新窗口打开的例子。
  1. $('a[href^="http"]').attr('target', '_blank');
  2. $('a[href^="//"]').attr('target', '_blank');
  3. $('a[href^="' + window.location.origin + '"]').attr('target', '_self');
复制代码

  对于checked属性,attr方法读到的是checked,prop方法读到的是true。
  1. $(input[type=checkbox]).attr("checked") // "checked"

  2. $(input[type=checkbox]).prop("checked") // true
复制代码

  (6)removeProp方法,removeAttr方法

  removeProp方法移除某个DOM属性,removeAttr方法移除某个HTML属性。
  1. $("a").prop("oldValue",1234).removeProp('oldValue')
  2. $('a').removeAttr("title")
复制代码

  (7)data方法

  data方法用于在一个DOM对象上储存数据。
  1. // 储存数据
  2. $("body").data("foo", 52);

  3. // 读取数据
  4. $("body").data("foo");
复制代码

  3、添加、复制和移动网页元素的方法

  jQuery方法提供一系列方法,可以改变元素在文档中的位置。

  (1)append方法,appendTo方法

  append方法将参数中的元素插入当前元素的尾部。
  1. $("div").append("<p>World</p>")

  2. // <div>Hello </div>
  3. // 变为
  4. // <div>Hello <p>World</p></div>
复制代码

  appendTo方法将当前元素插入参数中的元素尾部。
  1. $("<p>World</p>").appendTo("div")
复制代码

  上面代码返回与前一个例子一样的结果。

  (2)prepend方法,prependTo方法

  prepend方法将参数中的元素,变为当前元素的第一个子元素。
  1. $("p").prepend("Hello ")

  2. // <p>World</p>
  3. // 变为
  4. // <p>Hello World</p>
复制代码

  prependTo方法将当前元素变为参数中的元素的第一个子元素。
  1. $("<p></p>").prependTo("div")

  2. // <div></div>
  3. // 变为
  4. // <div><p></p></div>
复制代码

  (3)after方法,insertAfter方法

  after方法将参数中的元素插在当前元素后面。
  1. $("div").after("<p></p>")

  2. // <div></div>
  3. // 变为
  4. // <div></div><p></p>
复制代码

  (4)before方法,insertBefore方法

  before方法将参数中的元素插在当前元素的前面。
  1. $("div").before("<p></p>")

  2. // <div></div>
  3. // 变为
  4. // <p></p><div></div>
复制代码

  (5)wrap方法,wrapAll方法,unwrap方法,wrapInner方法

  wrap方法将参数中的元素变成当前元素的父元素。
  1. $("p").wrap("<div></div>")

  2. // <p></p>
  3. // 变为
  4. // <div><p></p></div>
复制代码

  wrap方法的参数还可以是一个函数。
  1. $("p").wrap(function() {
  2.   return "<div></div>";
  3. })
复制代码

 (6)clone方法

  clone方法克隆当前元素。
  1. var clones = $('li').clone();
复制代码

  对于那些有id属性的节点,clone方法会连id属性一起克隆。所以,要把克隆的节点插入文档的时候,务必要修改或移除id属性。

  (7)remove方法,detach方法,replaceWith方法

  remove方法移除并返回一个元素,取消该元素上所有事件的绑定。detach方法也是移除并返回一个元素,但是不取消该元素上所有事件的绑定。
  1. $('p').remove()
  2. $('p').detach()
复制代码

  replaceWith方法用参数中的元素,替换并返回当前元素,取消当前元素的所有事件的绑定。
  1. $('p').replaceWith('<div></div>')
复制代码

  事件绑定

  1、页面载入

  当页面载入成功后再运行的函数事件
  1. $(document).ready(function(){
  2.   do something...
  3. });

  4. //简写
  5. $(function($) {
  6.   do something...
  7. });
复制代码

  2、页面处理
  1. //bind 为每个匹配元素绑定事件处理函数,绑定多个用{}。
  2. $("p").bind("click", function(){
  3.   alert( $(this).text() );
  4. });
  5. $(menuF).bind({
  6.     "mouseover":function () {
  7.      $(menuS).parent().removeClass("hide");
  8.      },"mouseout":function () {
  9.      $(menuS).parent().addClass("hide");
  10. }
  11. });         


  12. $("p").one( "click", fun...)    //one 绑定一个一次性的事件处理函数
  13. $("p").unbind( "click" )        //解绑一个事件
复制代码

  3、页面委派
  1. // 与bind 不同的是当时间发生时才去临时绑定。
  2. $("p").delegate("click",function(){
  3.   do something...
  4. });

  5. $("p").undelegate();       //p元素删除由 delegate() 方法添加的所有事件
  6. $("p").undelegate("click")   //从p元素删除由 delegate() 方法添加的所有click事件
复制代码

  4、事件
  1. $("p").click();      //单击事件
  2. $("p").dblclick();    //双击事件
  3. $("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
  4. $("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
  5. $("button").mousedown()//当按下鼠标时触发事件
  6. $("button").mouseup()  //元素上放松鼠标按钮时触发事件
  7. $("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
  8. $("p").mouseover()     //当鼠标指针位于元素上方时触发事件
  9. $("p").mouseout()     //当鼠标指针从元素上移开时触发事件
  10. $(window).keydown()    //当键盘或按钮被按下时触发事件
  11. $(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
  12. $("input").keyup()     //当按钮被松开时触发事件
  13. $(window).scroll()     //当用户滚动时触发事件
  14. $(window).resize()     //当调整浏览器窗口的大小时触发事件
  15. $("input[type='text']").change()    //当元素的值发生改变时触发事件
  16. $("input").select()    //当input 元素中的文本被选择时触发事件
  17. $("form").submit()     //当提交表单时触发事件
  18. $(window).unload()     //用户离开页面时
复制代码

相关帖子

发表于 2016-12-31 16:08:32 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-6 11:23:40 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部