JQuery笔记

JQuery

1.JQuery下载地址: http://jquery.com/ ，分为压缩版和不压缩版，压缩版主要用于生产。
2.一般在body的最下方引入：
3.CDN:content Delivery Network内容分发网络 https://code.jquery.com/
4.$为JQuery的简写，$(“#foo”)即相当于JQuery(“#foo”)，通过JQuery获得的永远是对象，即使页面上没有该元素，使用JQuery选择器时，无需考虑浏览器是否支持该选择器，而CSS选择器则需要考虑兼容性。
5.$(document).ready()等网页中所有的DOM结构绘制完毕后就执行，类似于windon.onload，可以写成$(document).ready(function(){})；简写为$(function());6.JQuery对象和DOM对象的相互转化,只需要把DOM对象用$()包装起来即为JQuery对象，而JQuery通过下标$cr[0]或.get(index)方法$cr.get(0)即可得到DOM对象，JQuery无法使用DOM方法，同样，DOM无法使用JQuery的方法，。
7.属性值如果包含特殊的符号，需要用转义符转义\，例如：id属性为id#b，那么应该使用$(“#id\#b”)

选择器
基本选择器：
$(“#text”) //选取id为text的元素
$(“.text”) //选取所有class为text的元素
$(“p”) //选取所有

元素
$(“*”) //选取所有元素
$(“div,span,p.myClcass”) //选取所有

， 和拥有class为
myClass的

标签的一组元素

层次选择器：
$(“div span”) //选取

里的所有的 元素
$(“div>span”) //选取

元素下元素名是 的子元素，不包括孙子元素
$(“.one+div”) 选取class为one的下一个

同辈元素
$(“#two~div”) 选取id为two的元素后面的所有

同辈元素

过滤选择器
基本过滤选择器：
$(‘li:first’) //选取所有

• 元素中第一个
• 元素
  $(‘li:last’) //选取所有
• 元素中最后一个
• 元素

• $(“tr:even”) //选取索引为偶数的元素，从 0 开始
  $(“tr:odd”) //选取索引为奇数的元素，从 0 开始

  $(“tr:eq(index)”) //选取索引值等于index的元素
  $(“tr:gt(index)”) //选取索引值大于index的元素，不包括index
  $(“tr:lt(index)”) //选取索引值小于index的元素，不包括index

  $(":focus") //选取当前获取焦点的元素
  $(":animated") //选取正在执行动画效果的元素

  内容过滤选择器：
  $(“div:contains(‘nick’)”) //选取包含文本“nick”的

  元素
  $(“td:empty”) //选取不包含子元素或者文本的td空元素
  $(“div:has§”) //选取含有

  元素的

  元素
  $(“td:parent”) //选取含有子元素或者文本的元素

  可见性过滤选择器：
  $(“input:hidden”) //选取所有不可见的元素
  $(“div:visible”) //选取所有可见的

  元素

  属性过滤选择器：
  $(“div[id]”) //选取选拥有属性id的

  元素
  $(“div[title=text]”) //选取属性为title,属性值为”text”的

  元素
  $(“div[title!=text]”) //选取属性title不等于”text”的

  元素(没有title也算)
  $(“div[title^=text]”) //选取属性为title,属性值以”text”开始的

  元素
  $("div[title$=text]") //选取属性为title,属性值以”text”结束的

  元素
  $(“div[title*=text]”) //选取属性为title,属性值包含”text”的

  元素
  $(“div[title|=text]”) //选取属性为title,属性值为”en”或以”text”为前缀的
  元素（前缀是指en后面用连字符”-“连接） $("div[title~=text]") //选取属性为title,属性值为用空格分隔的值，其中一 个等于”text”的

  元素 $("div[id][title=text]") //选取拥有属性id,title，并且title的属性值为”text” 的

  元素 如何text变量，那么方法为:$(“div[title=’”+text+”’]”)

  子元素过滤选择器：
  $(“ul li:nth-child(index/even/odd/equation”) //选取每个

  • *
  • 元素，从1计算
    $(“ul li:first-child”) //选取每个
    • 中第一个
    • 元素
      $(“ul li:last-child”) //选取每个
      • 中最后一个
      • 元素
        $("ulli:only-child")//选取每个<ul>中唯一一个子元素是<li>的<li>元素注意：ulli中ul才是父元素，即选取<ul>父元素下的<li>子元素，例如ulli可用<div>代替$(“div:first-child”)，表示选取
        下的第一个子元素

  表单过滤选择器：
  $("#form1:enable") //选id为”form1”的表单内的所有可用元素
  $("#form2:disable") //选id为”form2”的表单内的所有不可用元素
  $(“input:checked”) //选取所有被选中的元素
  $(“input:checked”) //选取所有被选中的元素
  $(“select option:selected”) //选取下拉选择框中所有被选中的选项元素

  表单选择器：
  $(":input") //选取所有 input, textarea, select 和 button 元素
  $(":text") //选取所有的单行文本框
  $(":password") //选取所有密码框
  $(":radio") //选取所有单选按钮
  $(":checkbox") //选取所有复选框
  $(":submit") //选取所有提交按钮
  $(":image") //选取所有的图片按钮
  $(":reset") //选取所有重置按钮
  $(":button") //选取所有按钮
  $(":file") //选取所有文件域

  筛选器
  过滤
  $(“p”).eq(index) //选取所有

  元素中第index个

  元素,类似索引
  $(‘li’).first() //选取所有

• 元素中第一个
• 元素
  $(‘li’).last() //选取所有
• 元素中最后
• 元素
  $(‘li’).has(‘p’) //选取后代包含p元素的li元素。

• 查找
  $(“div”).children() //选取所有

  中的每个子元素,第一层
  $(“div”).find(“span”) //选取所有

  中包含的所有 元素,子子孙孙

  $(“p”).next() 　　　//选取紧邻

  元素后的下一个同辈元素
  $(“p”).nextAll() //选取

  元素之后所有的同辈元素
  $("#test").nextUntil("#test2") //选取id为"#test"元素之后到id为’#test2’之间所有的同辈元素,掐头去尾

  $(“p”).prev() //选取紧邻

  元素前的一个同辈元素
  $(“p”).prevAll() //选取

  元素之前所有的同辈元素
  $("#test").prevUntil("#test2") //id为"#test"元素之前到id为’#test2’之间所有的同辈元素,掐头去尾

  $(“p”).parent() //选取每个

  元素的父元素
  $(“p”).parents() //选取每个

  元素的所有祖先元素,包括body,html
  $("#test").parentsUntil("#test2") //id为"#test"元素到id为’#test2’之间所有的父级元素,掐头去尾

  $(“div”).siblings() //选取

  所有的同辈元素,不包括自己

  属性操作
  基本属性操作：
  $(“img”).attr(“src”); 　　　　　　 //返回文档中所有图像的src属性值
  $(“img”).attr(“src”,“test.jpg”); //设置所有图像的src属性，类属性也通用
  $(“img”).removeAttr(“src”); 　　　//将文档中图像的src属性删除
  $(“img”).hasClass(“test”) / /元素是否含有某个特定的类text,返回布尔值

  如果属性等于属性值本身，例如checked=“checked”，要使用.prop（“checked”，true）或.prop（“checked”，false）来代替，分别表示选中和不选中，boolern值不能使用引号。checked一般只用于初始化状态，表示选中。.prop（）返回的是标准值true或false。

  $(“input[type=‘checkbox’]”; //选中复选框
  $(“input[type=‘checkbox’]”).prop(“checked”, false);
  $(“img”).removeProp(“src”); 　　 //删除img的src属性？？？

  CSS类
  $(“p”).addClass(“selected”); 　　//为p元素加上 ‘selected’ 类
  $(“p”).removeClass(“selected”); //从p元素中删除 ‘selected’ 类
  $(“p”).toggleClass(“selected”); //如果存在就删除,否则就添加

  HTML代码/文本/值
  $(‘p’).html(); 　　　　　　　　　　 //返回p元素的html内容
  $(“p”).html(“Hello nick!”); //设置p元素的html内容
  $(‘p’).text(); 　　　　　　　　　　 //返回p元素的文本内容
  $(“p”).text(“nick”); 　　　　　　　//设置p元素的文本内容
  $(“input”).val(); 　　　　　　　　 //获取文本框中的值
  $(“input”).val(“nick”); 　　　　 //设置文本框中的内容
  $("tr:contains{(}^{\prime }"+$(this).val()+"’)") //使用变量的书写形式

  四、CSS操作
  样式
  $(“p”).css(“color”); //访问查看p元素的color属性
  $(“p”).css(“color”,“red”); //设置p元素的color属性为red
  $(“p”).css({ “color”: “red”, “background”: “yellow” }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
  注意：在css方法中，如果属性带有("-")符号，例如font-size属性，如果设置它的值时不带引号，那么就要用驼峰式写法，如：fontSize。如果带双引号即可以写成"font-size"，也可以写成"fontSize"。

  位置
  $(‘p’).offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260}
  $(‘p’).offset.top //获取

  元素响度于当前视窗的上偏移
  $(‘p’).offset.left //获取

  元素响度于当前视窗的左偏移
  $(“p”).position() //元素相对父元素的偏移，Object {top: 117, left: 250}
  $(“p”).position.top //元素相对父元素的上偏移
  $(“p”).position.left //元素相对父元素的左偏移

  $(window).scrollTop() //获取滚轮滑的高度
  $(window).scrollLeft() //获取滚轮滑的宽度
  $(window).scrollTop(‘100’) //设置滚轮滑的高度为100
  $(window).scrollleft(‘100’) //设置滚轮滑的宽度为100

  尺寸
  $(“p”).height(); //获取p元素的高度
  $(“p”).width(); //获取p元素的宽度
  $(“p”).height(100); //设置p元素的高度为100，默认为px
  $(“p”).width(100); //设置p元素的宽度为100，默认为px

  $(“p:first”).innerHeight() //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
  $(“p:first”).innerWidth() //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)

  $(“p:first”).outerHeight() //匹配元素外部高度(默认包括补白和边框)
  $(“p:first”).outerWidth() //匹配元素外部宽度(默认包括补白和边框)
  $(“p:first”).outerHeight(true) //为true时包括边距

  五、文档处理

  内部插入（即插入的内容在元素体内）
  $(“p”).append(“nick”); //每个p元素内，后面追加html内容
  $(“p”).prepend(“Hello”); //每个p元素内，前面追加html内容
  $(“p”).appendTo(“div”); 　　　//把p元素追加到div元素内容后面
  $(“p”).prependTo(“div”); 　 //把p元素追加到div元素内容前面

  外部插入（即插入的内容在元素体外，下一个同级元素之前）
  $(“p”).after(“nick”); //每个p元素同级之后插入html内容
  $(“p”).before(“nick”); //在每个p元素同级之前插入html内容
  $(“p”).insertAfter("#test"); //所有p元素插入到id为test元素的后面
  $(“p”).insertBefore("#test"); //所有p元素插入到id为test元素的前面

  替换
  $(“p”).replaceWith("Paragraph. "); //将所有匹配的元素替换成指定的HTML或DOM元素
  $("Paragraph. ").replaceAll(“p”); //用匹配的内容替换掉所有 selector匹配到的元素（匹配的元素并不会消失，而是复制后来替换）

  增加
  var $li_1 = $("<lititle=’banana’>香蕉</li>")//创建html节点，无论$(html)中html代码多么复杂，都可以这种方法来创建。

  删除
  $(“p”).empty(); //删除匹配的元素集合中所有的子节点，不包括本身
  $(“p”).remove(); //删除所有匹配的元素,包括本身
  $(“p”).detach(); //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

  复制
  $(“p”).clone() 　　//克隆元素并选中克隆的副本
  $(“p”).clone(true) //布尔值指事件处理函数是否会被复制

  包裹
  $(“p”).wrap("") //使用标签把每个

  元素单独包裹起来。
  $(“p”).wrapAll("") //使用标签把全部

  元素一起包裹起来。
  $(“p”).wrapInner("") //使用标签把每个

  元素下的子元素单独包裹起来，子元素包括文本元素。

  $(“p”).is(’:animated’) //判断p元素是否处于动画状态。

  动画：
  $(selector).animate({params},speed,callback); // params 参数定义形成动画的 CSS 属性,speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒,callback 参数是动画完成后所执行的函数名称。默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
  $(“p”).animate({height:‘250px’},400); //表示400毫秒内，p的高度变为250px.
  $(“p”).animate({height:’+=250px’},400); //表示400毫秒内，p的高度增加250px…

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

  //简写
  $(function($) {
  do something…
  });

  页面处理
  //bind 为每个匹配元素绑定事件处理函数，绑定多个用{字典}形式。
  $(“p”).bind(“click”, function(){
  alert( $(this).text() );
  });
  $(menuF).bind({
  “mouseover”:function () {
  $(menuS).parent().removeClass(“hide”);
  },“mouseout”:function () {
  $(menuS).parent().addClass(“hide”);
  }
  });

  $(“p”).one( “click”, fun…) //one 绑定一个一次性的事件处理函数
  $(“p”).unbind( “click” ) //解绑一个事件

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

  $(“p”).undelegate(); 　　　//p元素删除由 delegate() 方法添加的所有事件
  $(“p”).undelegate(“click”) //从p元素删除由 delegate() 方法添加的所有click事件

  事件
  $(“p”).click(); 　　//单击事件
  $(“p”).dblclick(); //双击事件
  $(“input[type=text]”).focus() //元素获得焦点时,触发 focus 事件
  $(“input[type=text]”).blur() //元素失去焦点时,触发 blur事件
  $(“button”).mousedown()//当按下鼠标时触发事件
  $(“button”).mouseup() //元素上放松鼠标按钮时触发事件
  $(“p”).mousemove() //当鼠标指针在指定的元素中移动时触发事件
  $(“p”).mouseover() //当鼠标指针位于元素上方时触发事件
  $(“p”).mouseout() 　//当鼠标指针从元素上移开时触发事件
  $(window).keydown() //当键盘或按钮被按下时触发事件
  $(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
  $(“input”).keyup() //当按钮被松开时触发事件
  $(window).scroll() //当用户滚动时触发事件
  $(window).resize() //当调整浏览器窗口的大小时触发事件
  $(“input[type=‘text’]”).change() //当元素的值发生改变时触发事件
  $(“input”).select() //当input 元素中的文本被选择时触发事件
  $(“form”).submit() //当提交表单时触发事件
  $(window).unload() //用户离开页面时

  (event object) 对象
  所有的事件函数都可以传入event参数方便处理事件
  $(“p”).click(function(event){
  alert(event.type); //“click”
  });

  (evnet object)属性方法：
  event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离
  event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离
  event.type 　　//事件的类型
  event.which 　 //按下了哪一个键
  event.data 　　//在事件对象上绑定数据，然后传入事件处理函数
  event.target 　//事件针对的网页元素
  event.preventDefault() 　//阻止事件的默认行为(比如点击链接，会自动打开新页面)
  event.stopPropagation() //停止事件向上层元素冒泡

  Ajax方法：
  .load(url selector [，data] [，callback]) //.load()方法
  url string类型 请求HTML页面的URL地址。如果只是载入某
  个元素，则空格后面加selector。
  data object类型 发送至服务器的key/value数据。
  callback function类型 请求完成时的回调函数，无论请求成功或失
  败,function(responseText，textStatus，XMLHttpRequest)，responseText为请求返回的内容，textStatus为请求状态：success、error、notmodified、timeout4种，XMLHttpRequest为XHLHttpRequest对象。

  .get(url [，data] [，callback] [，type]) //.get()方法
  url string类型 请求HTML页面的URL地址。
  data object类型 发送至服务器的key/value数据会作为QueryString
  附加到请求的URL中
  callback function类型 载入成功时回调函数（只有当Response的返回状
  态会success才调用该方法）自动将请求结果和状态传递给该方法,
  function(data,textStatus)， data为返回的内容，可以是XML文档，JSON文件，HTML片段等等。textStatus为请求状态：success、error、notmodified、timeout4中。

  七、效果
  基本
  $(“p”).show() 　　　　//显示隐藏的匹配元素
  $(“p”).hide() 　　　　//隐藏显示的元素
  $(“p”).toggle(); 　　 //切换 显示/隐藏
  $(“p”).show(“slow”); //参数表示速度,(“slow”,“normal”,“fast”),也可为900毫秒

  滑动
  $(“p”).slideDown(“900”); //用900毫秒时间将段落滑下
  $(“p”).slideUp(“900”); 　//用900毫秒时间将段落滑上
  $(“p”).slideToggle(“900”); //用900毫秒时间将段落滑上，滑下
  淡入淡出
  $(“p”).fadeIn(“900”); 　　 //用900毫秒时间将段落淡入
  $(“p”).fadeOut(“900”); 　　 //用900毫秒时间将段落淡出
  $(“p”).fadeToggle(“900”); 　//用900毫秒时间将段落淡入,淡出
  $(“p”).fadeTo(“slow”, 0.6); //用900毫秒时间将段落的透明度调整到0.6

  八、对象访问
  $.trim(str) 　 　//去除字符串两端的空格,通过返回值取得
  $(selector).each(function(){}) //把匹配的选择器都遍历一次。类似for；
  $.each(arr，function(i，item){}) 　　//遍历一个数组或对象，类似for循环，
  arr为要遍历的数据或对象，i为数组索引，item为i索引下的数组项；
  $.inArray(str，arr) //返回一个字符串在数组中的索引位置，
  不存在返回-1
  $.type(obj) //判断对象的类别（函数对象、日期对象、
  数组对象、正则对象等等
  $.isArray(obj) //判断某个参数是否为数组
  $.grep() 　 //返回数组中符合某种标准的元素
  $.extend() //将多个对象，合并到第一个对象
  $.makeArray() //将对象转化为数组
  $.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
  $.isFunction() //判断某个参数是否为函数
  $.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
  $.support() //判断浏览器是否支持某个特性

  九、插件拓展机制

  //方式一
  jQuery.fn.extend({
  check: function() {
  return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
  return this.each(function() { this.checked = false; });
  }
  });

  $(“input[type=checkbox]”).check();
  $(“input[type=radio]”).uncheck();

  //方式二
  jQuery.extend({
  min: function(a, b) { return a < b ? a : b; }, //三元运算
  max: function(a, b) { return a > b ? a : b; }
  });

  jQuery.min(2,3); //2
  jQuery.max(4,5); //5

  1、对radio 、checkbox 来说，checked属性可以保证页面初始化被选中，但是通过js或者jquery 控制checked属性并不能保证相应的被选中，同样也不能通过checked属性来判断该元素是否被选中。
  2、checked属性并不能影响form表单的值，表单页面真正被选中的元素才是form表单提交的值。
  3、通jquery的prop方法可以完美的选中或者取消选中元素，使用prop(“checked”,true) 选中，prop(“checked”,false)取消选中，通prop(“checked”) 返回的false或者true判断是否选中。
  4、使用.prop原则：一是只添加属性名称该属性就会生效应该使用prop，二是只存在true/false的属性应该使用prop()。

  $("#id").is(":checked") //判断select的option否选中，当为false时是未被选中的，为true时是被选中。当select的高度比option
  .is(selector) //根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。如果没有元素符合，或者表达式无效，都返回’false’。如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true.
  is() 函数比较常用的用法
  // 是否是隐藏的
  $(’#test’).is(’:visible’);
  // 判断input元素是否被选中
  $(‘input[name=chkNoChecked]’).is(’:checked’)；
  // 是否是第一个子元素
  $(this).is(":first-child");
  // 是否包含.blue,.red的class
  $(this).is(".blue,.red");
  // 文本中是否包含Peter这个词
  $(this).is(":contains(‘Peter’)");

  当使用.blur()事件时，如果调用alert、prompt，confirm之内的能挂起js执行的代码，可能会导致重复触发.blur()事件。这时，可以使用.change()事件来代替.blur()事件。
  .change()方法：change()函数用于为每个匹配元素的change事件绑定处理函数。该函数也可用于触发change事件。此外，你还可以额外传递给事件处理函数一些数据。
  change事件会在文本内容或选项被更改时触发。该事件仅适用于和以及。对于text和textarea元素，该事件会在元素失去焦点时发生(文本内容也发生了更改)。
  . trigger() 方法
  $(selector).trigger(event,[param1,param2,…]) //触发 selector元素的 select 事件
  triggerHandler() 方法
  $(selector).triggerHandler(event,[param1,param2,…]) //triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

  JQuery的链式语法，可以使用.end()返回上一级元素。