jQuery（锋利的jQuery笔记）

编程技术  /  houtizong 发布于 3年前   131

一、认识 JQuery
1. 概述
  jQuery是为了简化JavaScript的开发而诞生的一个JavaScript库。它是一个轻量级的库、拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。
  jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。

2. 配置jQuery环境
  获取jQuery最新版本： http://jquery.com/
  jQuery库类型说明：
    jquery-1.x.js（完整无压缩版本，用于测试、学习和开发）
    jquery-1.x.min.js（经过JSMin等工具压缩后的版本，体积非常小，用于产品和项目）
  使用JQuery：
    a.将jquery-1.x.js放入项目中
    b.在页面引入jQuery：<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

3. 页面加载事件（可以写多个 $(document).ready()）
  同JS中的window.onload，但window.onload只能有一个，window.onload必须等页面所有内容加载完毕后执行。$(document).ready()只需等DOM结构绘制完毕就执行，可能DOM关联的东西并没有加载完。
  <script type="text/javascript"> 
    $(document).ready(function(){
      alert("hello world");
    })
  </script>

4. jQuery代码风格（链式操作风格)
    JQuery 允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等
    例：$("#myDiv").addClass("css1")
          .children("a").removeClass("css2"); //选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除 css2 样式。

5. jQuery对象(不能使用DOM对象的方法)
  $("#myDiv").html(); //获取id为myDiv的元素内的html代码，同 document.getElementById("foo").innerHTML;
  JQuery 对象 转换成 DOM 对象  ：
    var $obj = $("#myDiv"); // jQuery对象
    var obj = $obj.get(0); // DOM对象，或者 var obj = $obj[0];
  DOM对象转换成 JQuery对象：
    var obj = documnet.getElementById("myDiv"); //DOM对象
    var $obj = $(obj); //jQuery对象

6. 解决jQuery和其它库的冲突
  jQuery库在其他库之后导入：
  jQuery.noConflict(); // 释放 JQuery对 $ 符号的控制权，释放后不能使用 $ 访问jQuery。
  var $j =  jQuery.noConflict(); // 自定义 $j 作为jQuery的快捷方式。
  如果不想转让 $ :
  jQuery.noConflict();
  jQuery(function($){...}); 或 （function($){...})(jQuery); //此时，可在函数内部继续使用 $ 。
  jQuery库在其他库之前导入：
    则可以使用jQuery关键字来使用jQuery，可以使用$来操作其它库。

7. jQuery开发工具和插件
  Dreamweaver：
    Dreamweaver是一个可视布局工具，代码自动提示需在 http://xtnd.us/dreamweaver/jquery 上下一个 jQuery-API.mxp插件。
  Aptana：
    Aptana是一个功能非常强大、开源和专注于Javascript的Ajax开发IDE。
  jQueryWTP 和 Spket插件：
    这两款插件都可以使Eclipse支持jQuery自动提示代码功能。分别在http://www.langtags.com/jquerywtp/ 和http://spket.com/ 上下载。
 
二、JQuery选择器
1. CSS选择器
  CSS是一项出色的技术，它使得网页的结构和表现层样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则，就可以行到各种不同样式的网页。其中包括标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择器等。

2. jQuery选择器
  写法简洁：
    jQuery使用 $("#ID") 来代替 document.getElementById("ID")来通过ID获取元素。
    使用$("tagName") 来代替 document.getElementsByTagName("tagName")来通过标签名获取HTML元素。
  支持CSS1、CSS2的全部和CSS3的部分选择器:
  完善的处理机制：
    if(document.getElementById("test")){ // 判断test是否存在，
      document.getElementById("test").style.color = "red"; //如果不进行判断，test不存在时页面会出现异常
    }
    $("#test").css("color","red"); // 这里无需判断test是否存在,不存在时也不会发生异常
    if($("#test").length>0){...} //或 if($("#test")[0]) 来判断是否得到该jQuery对象
 
3. jQuery基本选择器
  $("#myDiv") //根据给定的ID选择匹配的元素，返回单个元素
  $(".myClass") //根据给定的样式名称选择匹配的元素，返回集合元素
  $("p") //选取所有的<p>元素，返回集合元素
  $("*") //选择页面所有元素，返回集合元素
  $("div,span,p.myClass") // 选取所有<div>、<span>和拥有class为myClass的<p>元素，返回集合元素

4. jQuery层次选择器
  $("div span") //选择所有<div>里的所有<span>元素，返回集合元素
  $("div>span") //选择所有<div>里的<span>的子元素，返回集合元素
  $(".myClass+div") //选择紧接在样式名称为 myClass 的下一个<div>，等价于 $(".myClass").next("div")，返回集合元素
  $(".myClass~div") //选择样式名称为 myClass 之后的所有<div>兄弟元素，等价于 $(".myClass").nextAll()，返回集合元素
  $(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈<div>元素（无论前后），返回集合元素

4. jQuery过滤选择器
  基本过滤选择器：
    $("div:first") //选择所有<div>元素下的第一个<div>元素，返回单个元素
    $("div:last") //选择所有<div>元素下的最后一个<div>元素，返回单个元素
    $("div:not(.myClass)") //选择所有样式不包括myClass的<div>元素，返回集合元素
    $("div:even") //选择所有索引是偶数的<div>元素，返回集合元素
    $("div:odd") //选择所有索引是奇数的<div>元素，返回集合元素
    $("div:eq(1)") //选择所有索引等于1的<div>元素，返回集合元素
    $("div:gt(1)") //选择所有索引大于1的<div>元素，返回集合元素
    $("div:lt(1)") //选择所有索引小于1的<div>元素，返回集合元素
    $(":header") //选择所有标题元素（<h1>,<h2>,<h3>..... ），返回集合元素
    $("div:animated") //选择所有正在执行动画的<div>元素，返回集合元素

  内容过滤选择器：
    $("div:contains('我')") //选择含有文本'我'的<div>元素，返回集合元素
    $("div:empty") //选择不包含子元素（包括文本元素）的<div>元素，返回集合元素
    $("div:has(p)") //选择所有含有<p>元素的<div>元素，返回集合元素
    $("div:parent") //选择所有含有子元素（包括文本元素）的<div>元素，返回集合元素

  可见性过滤选择器：
    $(":hidden") //选择所有不可见的元素（包括<input type="hidden"/>、<div style="display:none;">、<div style="visibility:hidden;">等元素），返回集合元素
    $("input:hidden") //选择所有不可见的<input>元素，返回集合元素
    $(":visible") //选择所有可见的元素，返回集合元素

  属性过滤选择器：
    $("div[id]") //选择含有 id 属性的<div>元素，返回集合元素
    $("div[class=myClass]") //选择所有 class 属性值是myClass的<div>元素，返回集合元素
    $("div[class!=myClass]") //选择所有 class 属性值不是 myClass 的<div>元素，返回集合元素
    $("div[alt^=test]") //选择所有 alt 属性值以 test 开始的<div>元素，返回集合元素
    $("div[alt$=test]") //选择所有 alt 属性值以 test 结束的元素，返回集合元素
    $("div[alt*=some]") //选择所有 alt 属性值含有 some 的<div>元素，返回集合元素
    $("div[id][title=test]") //选择所有含有 id 属性的并且 title 属性值是 test 的元素，返回集合元素

  子元素过滤选择器（注意：index从1开始）：
    $(":nth-child(index/even/odd)") //选择每个父元素下的第 index/偶数/奇数子元素，而:eq(index)只匹配一个元素，返回集合元素
    $(":first-child") //选择每个父元素下的第一个子元素，:first只匹配并返回单个元素，返回集合元素
    $(":last-child") //选择每个父元素下的最后一个子元素，:last只匹配并返回单个元素，返回集合元素
    $("ul li:only-child") //在<ul>元素中选择只有一个<li>元素的子元素，返回集合元素

  表单对象属性过滤选择器：
    $("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素，返回集合元素
    $("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回集合元素
    $("input:checked") //选择所有被选中的<input>元素，返回集合元素
    $("#myForm:selected") //选择所有被选中的选择元素，返回集合元素

5. 表单选择器
  $(":input") //选择所有 <input> <select> <button> <textarea> 元素，返回集合元素
  $(":text") //选择所有单行文本框元素，返回集合元素
  $(":password") //选择所有密码框元素，返回集合元素
  $(":radio") //选择所有单选框元素，返回集合元素
  $(":checkbox") //选择所有复选框元素，返回集合元素
  $(":submit") //选择所有提交按钮元素，返回集合元素
  $(":image") //选择所有图片按钮元素，返回集合元素
  $(":reset") //选择所有重置按钮元素，返回集合元素
  $(":button") //选择所有按钮元素，返回集合元素
  $(":file") //选择所有上传域元素，返回集合元素
  $(":hidden") //选择所有不可见元素，返回集合元素

6. jQuery选择器中的一些注意事项
  特殊符号：
    选择器中含有 "."，"#"，"("，"]" 等特殊字符，应采用 "\\" 对特殊符号进行转义。
  空格：
    $('.test :hidden'); //选择class为"test"的元素里面的隐藏元素
    $('.test:hidden'); //选择隐藏的class为"test"的元素

7. jQuery提供的选择器的扩展
  MoreSelectors for jQuery插件
  Basic Xpath

8. 其他使用CSS选择器的方法
  document.getElementsBySelector()
  cssQuery()
  querySelectorAll()

三、JQuery中的DOM操作
1. 查找节点
  $("#myDiv").text(); //获取节点文本内容
  $("#myDiv").attr("title"); //获取节点title属性

2. 创建节点
  $("#myDiv").append($("<li title='000'>111</li>")); //使用jQuery的工厂函数$()创建一个新的<li>节点，再使用jQuery的append()方法将其插入文档中

3. 插入节点
  $("p").append("<b>你好</b>"); //在<p>元素内追加内容（下一级）
  $("<b>你好</b>").appendTo("p"); //同上
  $("p").prepend("<b>你好</b>"); //往<p>元素内最前面插入元素（下一级）
  $("<b>你好</b>").prependTo("p"); //同上
  $("p").after("<b>你好</b>"); // 往<p>元素后插入元素（同级）
  $("<b>你好</b>").insertAfter("p"); //同上
  $("p").before("<b>你好</b>"); //往<p>元素前面插入元素（同级）
  $("<b>你好</b>").insertBefore("p"); //同上

4. 删除节点
  var $li = $("p").remove(); //将<p>元素及它的后代元素全部移除，返回被删节点的引用
  $li.appendTo("ul"); //继续使用被删的节点，将它重新添加到<ul>元素里
  $("p").appendTo("ul"); //简化上面的两部操作，addendTo()方法直接来移动元素
  $("p").remove("p[title != 你好]"); //选择性的删除
  $("p").empty(); //清空<p>里面的内容和子节点

5. 复制节点
  $("#myDiv1 span").click( function(){ //点击id为myDiv1的元素内的span元素，触发click事件
    $(this).clone().appendTo("#myDiv2"); //将span元素克隆添加到id为myDiv2的元素内
    $(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数，表示同时复制事件
  })

6. 替换节点
  $("p").replaceWith("<strong>您好</strong>"); //替换所有的<p>元素
  $("<strong>您好</strong>").replaceAll("p"); //同上

7. 包裹节点
  $("strong").wrap("<b></b>"); //用<b>元素把所有<strong>元素单独包裹起来
  $("strong").wrapAll("<b></b>"); //用<b>元素把所有<strong>元素全部包裹起来
  $("strong").wrapInner("<b></b>"); //把<b>元素的子内容（包括文本节点）包裹起来

8. 属性操作
  $("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性
  $("#myDiv").attr("title","我是标题"); //设置id为myDiv的元素的title属性的值
  $("#myDiv").attr({"title":"我是标题", "alt":"我还是标题"); //一次性设置多个属性的值
  $("#myDiv").removeArrt("title"); //移除id为myDiv的元素的title属性

9. 样式操作
  var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式
  $("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式为myClass
  $("#myDiv").addClass("other"); //在id为myDiv的元素中追加other样式，有相同样式属性时后者覆盖前者
  $("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式
  $("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中同时移除myClass和other两个样式
  $("#myDiv").removeClass(); //将id为myDiv的元素移除所有样式
  $("#myDiv").toggleClass("other"); //切换样式，在有other样式和没other样式之间切换
  $("#myDiv").hasClass("other"); //判断是否有other样式

10. 设置和获取HTML、文本和值
  $("#myDiv").html(); //获取id为myDiv的元素的HTML代码（相当于JavaScript中的innerHTML）
  $("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码
  $("#myDiv").text(); //获取id为myDiv的元素的文本内容（相当于innerText ）
  $("#myDiv").text("hello"); //设置id为myDiv的元素的文本内容
  $("#myInput").val(); //获取id为myDiv的元素的value值 （支持文本框、下拉框、单选框、复选框等）
  $("#myInput").val("hello"); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）

11. 遍历节点
  $("#myDiv").children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）
  $("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素
  $("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素
  $("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素
  $("#myDiv").closest("span"); //从id为myDiv的元素开始，逐级向上匹配最接近的span元素，直到匹配到或返回空

12. CSS-DOM 操作
  $("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值
  $("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值
  $("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color和fontSize样式的值
  $("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度为半透明（兼容浏览器）
  $("#myDiv").css("height"); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
  $("#myDiv").height(); //同上
  $("#myDiv").height(100); //设置id为myDiv的元素的高度为100px
  $("#myDiv").height(10em); //设置id为myDiv的元素的高度为10em
  $("#myDiv").css("width"); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
  $("#myDiv").width(); //同上
  var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
  alert(offset.top + "|" + offset.left); //分别为左偏移和右偏移
  var position = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
  alert(offset.top + "|" + offset.left); //分别为左偏移和右偏移
  $("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
  $("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
  $("#txtArea").scrollTop(100); //设置id为txtArea的元素垂直滚动条距离顶端的距离
  $("#txtArea").scrollLeft(100); //设置id为txtArea的元素横向滚动条距离左侧的距离

四、JQuery中的事件和动画
1. 加载DOM
  $(document).ready(); //页面加载完毕后添加事件，相当于JS中的window.onload方法
  $(document).ready()和window.onload的区别：
    window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行。$(document).ready()是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关联的文件都已经加载完毕。
    window.onload注册时后面注册的要覆盖前面的，故只可以注册一次。但可以在同一个页面注册多个(document).ready()事件。
    $(document).ready()可以缩写成 $(function(){ }) 或 $().ready()

2. 事件绑定
  bind(type [,data], fn); //文档装载完成后，可以通过bind()方法为元素进行事件绑定，可多次绑定。
    type：指事件的类型
      blur（失去焦点 ）
      focus（获得焦点）
      load（加载完成 ）
      unload（销毁完成）
      resize（调整元素大小 ）
      scroll（滚动元素）
      click（单击元素事件 ） //常用事件可简写为：$("p").click(function(){...});
      dbclick（双击元素事件）
      mousedown（按下鼠标 ）
      mouseup（松开鼠标）
      mousemove（鼠标移过 ）
      mouseover（鼠标移入 ）
      mouseout（鼠标移出）
      mouseenter（鼠标进入 ）
      mouseleave（鼠标离开）
      change（值改变 ）
      select（下拉框索引改变 ）
      submit（提交按钮）
      keydown（键盘按下 ）
      keyup（键盘松开 ）
      keypress（键盘单击）
      error（异常）

    data：事件传递的属性值，event.data额外传递给对象事件的值
    fn：绑定的处理函数，在此函数体内， $(this) 指携带相应行为的DOM元素
  $("p").bind("mouseover mouseout", function(){...}); //同时绑定多个事件
3. 合成事件
  hover(enter,leave) ：鼠标移入执行enter方法、移出事件执行leave方法
  toggle(fn1,fn2,...fnN) ：鼠标第一次点击执行fn1，第二次点击执行fn2...直到最后一个后重复

4. 事件冒泡
  如果父元素和子元素都绑定了同一个事件，事件会按照DOM的层次结构，像水泡一样不断向上触发直到顶端。
  $("span").bind("click", function(event){ //得到event事件对象
    ...
    event.stopPropagation(); //停止事件冒泡
  });

  $("#btnSubmit").bind("click", function(event){
    ...
    event.preventDefault(); //阻止事件默认行为，相当于return false;
  });
  jQuery不支持事件捕获，即事件从最顶端往下开发触发。

5. 事件对象的属性
    event.type() //获取事件的类型
    event.preventDefault(); //阻止事件默认行为，相当于return false;
    event.stopPropagation(); //停止事件冒泡
    event.target() //获取触发事件的元素
    event.relatedTarget() //引发事件的元素
    event.pageX()/event.pageY() //获取鼠标相对于页面的 X 和 Y 坐标
    event.which() //在单击事件中获取到对应的鼠标左、中、右键，值分别是1、2、3
    event.metaKey() //获取<ctrl>按键
    event.originalEvent() //指向原始的事件对象

6. 移除事件
  $("#myDiv").unbind(); //移除id为myDiv的元素的所有事件
  $("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件
  $("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件
 
  $("#myDiv").one("click", [data], function(){ //使用one绑定的事件只执行一次
    alert("function1");
  });

7. 触发事件（模拟操作）
  $("#btn").trigger("click"); //手动触发click事件，不需要用户真正的click
  $("#btn").click(); //同上

8. 事件命名空间
  $("#myDiv").bind("click.hello", function(){
    ...
  });
  $("#myDiv").bind("click", function(){
    ...
  })
  $("div").unbind("click"); //两个事件都被移除
  $("div").unbind(".hello"); //只移除第一个,hello空间下的事件
  $("div").unbind("click!"); //只移除第二个（注意感叹号，指没有名字空间的）

9. JQuery 中的动画
  $("div").hide(); //隐藏所有DIV元素，相当于sytle="display:none"
  $("div").show(); //显示所有DIV元素
  $("div").show(slow); //slow(600毫秒)，normal(400)，fast(200)
  $("div").hide(1000); //一秒内隐藏所有DIV元素
  $("div").show(1000); //一秒内显示所有DIV元素
  $("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）
  $("div").fadeIn(); //升高元素的不透明度，直至显示
  $("div").slideUp(); //由下至上收缩元素，直至消失（支持速度参数）
  $("div").slideDown(); //由上至下展开元素，直至显示

10. 自定义动画 animate
  $(elem).animate(params, [speed], [callback]);
    params ：样式属性及值的映射
    speed: 速度参数
    callback: 动画完成后执行函数
  例：$("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置

  $("#myDiv").animate({left:"+=500px"}, 2000); //在当前位置累加、累减
  $("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //多重动画，同时执行。想分开执行的话就写成两条语句

11. 停止动画
  $("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画，参数都是boolean型，cleanQuene表示是否要清空未执行完的动画队列，gotuEnd表示是否直接将正在执行的动画跳转到末状态。
  $("#myDiv").is(":animate") //判断元素是否在执行动画
  $("#myDiv").toggle(); //显示与隐藏元素
  $("#myDiv").slideToggle(); //展开与收缩元素
  $("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

上一篇：Java编程规范整理
下一篇：Maven

请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！

留言需要登陆哦

技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];

      订阅博客周刊 去订阅

文章归档

文章标签

友情链接

首页
关于我们
Auther ·HouTiZong
侯体宗的博客
© 2020 zongscan.com
版权所有ICP证 : 粤ICP备20027696号
PHP交流群 也可以扫右边的二维码
侯体宗的博客