A-A+

jQuery备忘录(一)

2016年07月03日 JQuery, 工作总结 暂无评论
jQuery2.x 不再兼容 IE6、7、8 。
jQuery 名称冲突:var jq=jQuery.noConflict(),使用自己的名称(比如 jq)来代替 $ 符号。
把jQuery对象转成DOM对象:利用数组下标的方式读取到jQuery中的DOM对象
  1. 层级选择器都有一个参考节点
  2. 后代选择器包含子选择器的选择的内容
  3. 一般兄弟选择器包含相邻兄弟选择的内容
  4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下.

 

  1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引
  2. gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始.

 

  1. :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等
input[type="text"],input[type="checkbox"]
  1. jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的.
  2. 在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素
  3. attr()有4个表达式
    1. attr(传入属性名):获取属性的值
    2. attr(属性名, 属性值):设置属性的值
    3. attr(属性名,函数值):设置属性的函数值
    4. attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
      (dom中有个概念的区分:Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性,获取Attribute就需要用attr,获取Property就需要用prop)
 
.htm()方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)
.text()结果返回一个字符串,包含所有匹配元素的合并文本.

.html与.text的异同:

  1. .html与.text的方法操作是一样,只是在具体针对处理对象不同
  2. .html处理的是元素内容,.text处理的是文本内容
  3. .html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用
  4. 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器.val
    1. 通过.val()处理select元素, 当没有选择项被选中,它返回null
    2. .val()方法多用来设置表单的字段的值
    3. 如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值.

.html(),.text()和.val()的差异:  

  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
  2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。

.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

.css
.css( propertyNames ):传递一组数组,返回一个对象结果
浏览器属性获取方式不同,在获取某些值的时候都jQuery采用统一的处理,比如颜色采用RBG,尺寸采用px

.css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理

当一个数只被作为值(value)的时候, jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,例如 .css("width",50}) 与 .css("width","50px"})一样.

通过.css方法设置的样式属性优先级要高于.addClass方法.
.addClass与.css方法各有利弊,一般是静态的结构,都确定了布局的规则,可以用addClass的方法,增加统一的类规则
如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式

 parents()方法选择性地接受同一型选择器表达式,

.parents()和.parent()方法是相似的,但后者只是进行了一个单级的DOM树查找.
.parents()和.closest()的区别
  1. 起始位置不同:.closest开始于当前元素 .parents开始于父元素
  2. 遍历的目标不同:.closest要找到指定的目标,.parents遍历到文档根元素,closest向上查找,知道找到一个匹配就停止查找,parents一直查找到根元素,并将匹配的元素加入集合
  3. 结果不同:.closest返回的是包含零个或一个元素的jquery对象,parents返回的是包含零个或一个或多个元素的jquery对象

 

each是一个for循环的包装迭代器
each通过回调的方式处理,并且会有2个固定的实参,索引与元素
each回调方法中的this指向当前迭代的dom元素

 

.data()

在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

遍历一个jQuery对象,为每个匹配元素执行一个函数。

标签: