jQuery(锋利的jQuery笔记)

颛孙越
2023-12-01

一、认识 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%

 类似资料: