jQuery学习笔记（一）

本系列适合作为JQ的复习文档。

本章主要参考来源：绿叶学习网 - jQuery入门教程

0 简介

jQuery，JavaScript和Query（查询），是辅助JavaScript开发的库。

官网有两种库文件：

• jquery.js（开发版） 完整无压缩，用于测试与学习

• jquery.min.js（发布版） 高度压缩，用于实际开发

需要先将jQuery引入HTML，再进行库的调用：

1 选择器

jQuery选择器跟CSS选择器非常类似。
$("选择器")

1.1 基础选择器

1.1.1 基本选择器

• 元素选择器
  $("元素名")
  ======================
  $(function () {
  // $("div").css("color","red");
  })
  $(function(){})功能类似于JavaScript中的window.onload = function(){}，也就是在文档加载完成之后执行的代码。
  写jQuery代码都在$(function(){})里面写。
  css()方法是jQuery操作CSS样式的方法，因为css()是“对象的一个方法”，所以要使用点运算符来调用它：$(“div”).css()。
• id选择器
  $("#id名")
• class选择器
  $(".类名")
• 群组选择器
  $("选择器1 , 选择器2 ,……,选择器n")
• *选择器
  $(function () {
  $("#list ").css("color","red");
  })
  在CSS中，我们常常用选择器来去除所有元素默认的padding和margin：*{padding:0;margin:0;}

1.1.2 层次选择器

• 后代选择器
  $("M N")
  选取M下的所有N元素，包括子元素和其他后代元素。
• 子代选择器
  $("M>N")
  选取M下的子元素N，不包括其他后代元素。
• 兄弟选择器
  $("M～N")
  选取M元素后面的所有某一类兄弟元素N。
  prevAll()方法用来“向前查找兄弟元素”
• 相邻选择器
  $("M+N")
  选取M元素后面的某一个相邻的兄弟元素N。

在实际开发中，如果想要在两两元素之间实现什么效果，会经常用到这样的技巧：如$("li+li")，使用相邻选择器，表示“选择li元素相邻的下一个li元素”。

1.1.3 属性选择器

属性 attribute
属性选择器是参考正则表达式来设计的，它使选择器具有通配符的功能。
在jQuery中，属性选择器最常见于表单操作。

selector指选择器，attr指属性（attribute），value指属性值。
$("selector[attr]") 选择包含给定属性的元素
$("selector[attr='value']") 选择给定的属性是某个特定值的元素
$("selector[attr != 'value']") 选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器，需要同时满足多个条件时使用

1.2 伪类选择器

如:link、:visited、:hover、:active这4个超链接选择器

1.2.1 简单伪类选择器；

:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素（非子元素）
:last或last() 选择某元素的最后一个元素（非子元素）
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始
:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始
:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
:header 选择h1~h6的标题元素
:animated 选择所有正在执行动画效果的元素
:root 选择页面的根元素
:target 选择当前活动的目标元素（锚点）

$("li:not(#myLi)")表示选择除了id为myLi之外的其他li元素。
$("li:first,li:last")是一个群组选择器，表示选择第一个li元素和最后一个li元素。
$("li:odd")表示选择索引值为奇数的li元素。
$(":header").css("color", "red");

1.2.2 子元素伪类选择器？？

“第1类选择器不分元素类型，第2类选择器区分元素类型。”
第1类子元素伪类选择器

:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素，n的值为“整数|odd|even”
:only-child 选择父元素中唯一的子元素（该父元素只有一个子元素）

        $("ul li:first").css("background-color", "red");
        $("ul li:nth-child(2)").css("background-color", "orange");
        $("ul li:nth-child(3)").css("background-color", "yellow");
        $("ul li:nth-child(4)").css("background-color", "green");
        $("ul li:last").css("background-color", "blue");

上面的效果用CSS操作来得更简单
第2类子元素伪类选择器

:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type 选择同元素类型的第n个同级兄弟元素，n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素（但是父元素可以有多个子元素）

1.2.3可见性伪类选择器；

:hidden     选取所有不可见元素
:visible    选取所有可见元素，与:hidden相反

“:hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。

1.2.4 内容伪类选择器；

:contains(text) 选择包含给定文本内容的元素
:has(selector) 选择含有选择器所匹配元素的元素
:empty 选择所有不包含子元素或者不包含文本的元素
:parent 选择含有子元素或者文本的元素（跟:empty相反）

$("E:contains(text)")
$("p:contains(jQuery)").css("background-color", "red");
$("p:contains(jQuery)")表示选择包含“jQuery”这一个文本内容的p元素。
$(":has(selector)")
$("div:has(span)")表示选择内部含有span元素的div元素。
$("div:has(#red,#yellow)")表示选择内部含有id为red和id为yellow子元素的div元素。:has(selector)中的selector是一个群组选择器。

使用:empty选择器选择所有“没有子元素”或者“没有文本”的空元素。
$("td:empty")表示选择内部没有文本内容页没有子元素的td元素。
使用:parent选择器选择“含有子元素”或者“含有文本”的元素。:parent选择器跟:empty选择器是相反的。
$("td:parent")表示选择内部有文本内容页没有子元素的td元素。

1.2.5 表单伪类选择器；

:input 选择所有input元素
:button 选择所有普通按钮，即type="button"的input元素
:submit 选择所有提交按钮，即type="submit"的input元素
:reset 选择所有重置按钮，即type="reset"的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域

$("input:checkbox").attr("checked","checked");

$("input:checkbox")表示选择所有复选框元素，attr("checked","checked")表示设置复选框的checked属性值为checked。

1.2.6 表单属性伪类选择器

:checked 选择所有被选中的表单元素，一般用于radio和checkbox

option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素，一般用于input、select和textarea
:disabled 选择所有不可用元素，一般用于input、select和textarea
:read-only 选择所有只读元素，一般用于input和textarea
:focus 选择获得焦点的元素，常用于input和textarea

var a = $("input:checked").val();

$("input:checked").val()表示选择“被选中”的单选框或复选框（因为只有单选框和复选框有checked属性），并且获取表单元素的value值。
val()方法用于获取表单元素的value值;
jQuery这些选择器是参考CSS3选择器来的.

2 对元素的操作

有3种操作。

2.1 属性操作

2.1.1 获取元素属性；

  $("元素名").attr("属性名")

会返回该元素的这个属性值。

2.1.2 设置元素属性；

$("元素名").attr("属性","属性值")

会在该元素添上该属性。
在实际开发中，我们很多时候需要使用jQuery来为某些元素添加一些属性。
可以使用prop()方法来获取和设置元素属性；
attr()方法用于操作元素的固有属性（元素本身具有的属性，如a标签的href、target、title等）；
prop()方法用于操作元素的自定义属性（用户自己定义的一些属性）。

2.1.3 删除元素属性；

 $("a").removeAttr("title");

使用removeAttr()方法把a标签的title属性删除。

2.2 内容操作

html()和text()用于操作普通标签，val()用于操作表单标签。

2.2.1 html()和text()

$("选择器").html()              //获取HTML内容
$("选择器").html("HTML内容，即HTML的语句");   //设置HTML内容

跟JavaScript中的innerHTML效果相同。
$().text() //获取文本内容
$().text("文本内容") //设置文本内容
跟JavaScript中的innerText效果相同
JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。

2.2.2 val()

$().val()                  //获取表单元素
$().val("表单元素的值")    //设置表单元素

表单元素的值都是通过自身的value属性来传递的。因此不能用html()和text()这两种方法来获取元素的内容（值），而要用val()来获取或设置“表单元素”的值。

2.3 样式操作

使用jQuery操作元素样式，当样式比较少时，建议使用“CSS属性操作”；当样式比较多时，建议使用“CSS类名操作”。

2.3.1 CSS属性操作

$().css("属性") //获取属性值
$().css("属性","属性值") //设置单个CSS属性
$().css({"属性1":"属性值1","属性2":"属性值2",……}) //设置多个CSS属性设置多个CSS属性的 “键值对”的形式，跟JSON数据格式、JavaScript对象的属性形式是非常相似的；也可以用这种方式为元素设置单个CSS属性。

2.3.2 CSS类名操作

$().addClass("类名") //添加类名
$().removeClass("类名") //删除类名
$().toggleClass("类名") //添加或删除类名

当需要使用jQuery为某些元素设置太多的CSS样式时，如果使用css()这个方法，jQuery里面的代码会显得比较臃肿。因此，我们更倾向于先在CSS代码中定义一个类，在这个类中定义相应的CSS代码，然后再使用jQuery对这个类名进行相应的添加、删除、切换，从而达到对样式进行批量操作。
toggleClass()方法用于检查元素是否具有某个类名。如果类名不存在，则为该元素添加类名；如果类名已存在，则为该元素删除类名。

2.3.3 非.css方法

• 元素的宽度高度width()和height()
  $().width() //获取元素的宽度，是一个不带单位的数字
  $().width(n) //设置元素的宽度，n是一个整数，表示npx，不带单位
  $().height() //获取元素的高度 可用于window或document对象。
  $().height(n) //设置元素的高度 可用于window或document对象。
• 元素的位置offset()和position()
  $().offset().top //获取元素相对于当前文档“顶部”的距离。
  $().offset().left //获取元素相对于当前文档“左部”的距离。
  $().position().top //表示元素相对于被定位的祖辈元素的顶部的垂直距离。
  $().position().left //表示元素相对于被定位的祖辈元素的左部的水平距离。
  在web应用开发中，获取元素的坐标是非常常见的操作。jQuery的offset()和position()的结合使用，方便我们快速获取元素坐标。
• 滚动条的距离scrollTop()和scrollLeft()
  $().scrollTop() //获取滚动距离
  $().scrollTop(value) //设置滚动距离
  scrollLeft()方法的用法跟scrollTop()方法一样。
  我们常见到的回顶部特效、下拉固定特效等，其实就跟这个技巧有关。