【总结】慕课网 jQuery基础

jQuery基础——样式篇

1.初识jQuery
jQuery对象与DOM对象是不一样的。jQuery是一个类数组对象，顾名思义，其兼具对象和数组的特性。
而DOM对象就是一个单独的DOM元素。
它们之间也可互相转化。
利用数组下标的方式可以读取到jQuery中的DOM对象(数组的索引是从0开始的)，通过jQuery自带的get()方法也可以实现类似效果。

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

相比较jQuery转化成DOM，开发中更多的情况是把一个DOM对象加工成jQuery对象，利用$(DOM)方法可加工DOM对象。

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

2.jQuery选择器

• id选择器
  $(“#id”)等同于document.getElementById()
  注：id是唯一的，每个页面中只能使用一次。

• 类选择器
  $(“.class”)等同于document.getElementsByClassName()
  注：涉及到对多个DOM元素进行处理的时候，使用jQuery对象更加简便，无需循环处理。

• 元素选择器
  $(“element”)等同于document.getElementsByTagName()

• 全选择器
  $(“*”)等同于document.getElementsByTagName(“*”)

• 层级选择器(只能筛选出同级别以及子级别的jQuery对象,无法向上查找)
  $(“parent > child”)子选择器
  $(“ancestor descendant”)后代选择器
  $(“prev + next”)相邻兄弟选择器
  $(“prev ~ siblings”)一般兄弟选择器

• 基本筛选选择器(实现根据索引进行筛选以及过滤功能，针对的都是元素DOM节点)
  $(“:first”)匹配第一个元素
  $(“:last”)匹配最后一个元素
  $(“:eq(index)”)在匹配的集合中选择索引值等于index的元素
  $(“:gt(index)”)在匹配的集合中选择索引值大于index的元素
  $(“:lt(index)”)在匹配的集合中选择索引值小于index的元素
  $(“:even”)在匹配的集合中选择索引值为偶数的元素
  $(“:odd”)在匹配的集合中选择索引值为奇数的元素
  $(“:not(selector)”)一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素
  
  $(“:header”)选择所有标题元素，像h1,h2,h3等
  $(“:lang(language)”)选择指定语言的所有元素
  $(“:root”)选择该文档的根元素
  $(“:animated”)选择所有正在执行动画效果的元素

• 内容筛选选择器
  $(“:contains(text)”)选择所有包含指定文本的元素(遍历所有的子节点)
  $(“:parent”)选择所有含有子元素或者文本的元素
  $(“:empty”)选择所有没有子元素的元素(包含文本节点)
  $(“:has(selector)”)选择元素中至少包含指定选择器的元素

• 可见性筛选选择器
  $(“:visible”)选择所有显示的元素
  $(“:hidden”)选择所有隐藏的元素

• 属性筛选选择器(可以定位到元素的属性，也可以定位到这些属性上使用特定值的元素)
  $(“[attribute]”)选择具有指定属性的元素，该属性可以是任何值
  $(“[attribute=’value’]”)选择指定属性是给定值的元素
  $(“[attribute!=’value’]”)选择不存在指定属性，或者指定的属性值不等于给定值的元素
  $(“[attribute^=’value’]”)选择指定属性是以给定字符串开始的元素
  $(“[attribute$=’value’]”)选择指定属性是以给定字符串结尾的元素，这个比较是区分大小写的
  $(“[attribute*=’value’]”)选择指定属性具有包含一个给定的子字符串的元素

• 子元素筛选选择器
  $(“:first-child”)选择所有父级元素下的第一个子元素
  $(“:last-child”)选择所有父级元素下的最后一个子元素
  $(“:nth-child”)选择所有父级元素下的第n个子元素
  注: :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

• 表单元素选择器
  $(“:input”)选择所有input,textarea,select和button元素
  $(“:text”)匹配所有文本框
  $(“:password”)匹配所有密码框
  $(“:radio”)匹配所有单选按钮
  $(“:checkbox”)匹配所有复选框
  $(“:submit”)匹配所有提交按钮
  $(“:image”)匹配所有图像域
  $(“:reset”)匹配所有重置按钮
  $(“:button”)匹配所有按钮
  $(“:file”)匹配所有文件域

• 特殊选择器this
  通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

3.jQuery的属性与样式

• .attr()与.removeAttr()
  操作属性的DOM方法有：getAttribute(),setAttribute(),removeAttribute()
  jQuery中使用$attr()方法来获取和设置元素属性，用removeAttr(attributeName)来为匹配的元素集合中的每个元素中移除一个属性（attribute）

• .html()及.text()
  .html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
  .text()得到匹配元素集合中每个元素的文本内容集合， 包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容

• .val()
  通过.val()处理select元素， 当没有选择项被选中，它返回null
  val()方法多用来设置表单的字段的值
  如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

• .addClass()
  通过动态改变类名（class），可以让其修改元素呈现出不同的效果

• .removeClass()
  从匹配的元素中删除全部或者指定的class

• .toggleClass()
  通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

• .css()
  获取元素样式属性的计算值或者设置元素的CSS属性
  注：通过.css方法设置的样式属性优先级要高于.addClass方法