锋利的jQuery 笔记整理一
2018-04-04 17:24
176 查看
一、认识jQuery
1 javascript自身存在的三个弊端
复杂的文档对象模型、不一致的浏览器实现、便捷的开发、调试工具的缺乏。
2 javascript常见的库
jQuery的优势:(1)轻量级 (2) 强大的选择器(3)出色的DOM操作(4)可靠的事件处理 (5)完善的ajax (6)不污染顶级变量(7)出色的浏览器兼容性 (8)链式操作方式(9)隐式迭代(10)行为层和结构层的分离(11)丰富的插件支持(12)完善的文档(13)开源
3对比
$是jQuery的简写形式。举例:
$("#f")等价于jQuery("#f") $.ajax等价于jQuery.ajax
4 链式操作风格$(".level1>a).click(function(){
$(this).addClass("current") //给当前元素添加样式
.next().show() //下一个元素显示
.parent.siblings()children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除样式
.next().hide(); //他们的下一个元素隐藏
return false;
});5 jquery对象和DOM对象
(1)DOM对象,每一份DOM都可以表示成一棵树,可以通过javascript里面的getElementById或者getElementByTagName来获取元素节点,像这样得到的DOM元素就是DOM对象。
(2)jquery对象,通过jquery包装DOM对象后产生的对象
$("#f").html 等价于 document.getElementById("f").innerHTML;
在jquery对象中无法使用DOM对象里的任何方法。在DOM对象中无法使用jQuery对象里的任何方法。
6 jquery对象和DOM对象的相互转换(1) jquery对象转换成DOM对象
(2)DOM对象转换成jquery对象
对于一个DOM对象,只需要把$()把DOM对象包装起来,就可以得到jQuery对象。
var cr=document.getElementById("cr"); //DOM对象
var $cr=$("#cr"); //jquery对象
实例研究:
二 jQuery 选择器
jquery的行为规则都必须在获取到元素之后才能生效
1 jQuery选择器的优势
(1)简洁的写法(2) 支持css1到css3选择器,也有自己独有的选择器 (3)完善的处理机制
用jQuery获取网页中不存在的元素也不会报错
需要注意的是
$("tt")获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在,不能用以下代码if ($("tt")){
//do something
}而是根据获取到的元素的长度来判断 或者转化成DOM对象if ($("tt").length){
//do something
}
<
4000
/span>
分为四大类:基本选择器 层次选择器 过滤选择器 表单选择器
(1)基本选择器
(2)层次选择器
$("prev+next")与next()方法等价
$("prev~siblings")与nextAll()方法等价
但是 ,$("prev~siblings")只能选择prev元素后面的同辈元素,而siblings()方法与前后位置无关,只要是同辈节点都能匹配。
(3)过滤选择器
:nth-child()选择器index从1开始。:eq(index)从0开始。
(4)表单选择器
[align=center]三 jQuery中的DOM操作
[/align]
1 DOM操作分类
2 jQuery中的DOM操作
节点操作
属性操作
样式操作
设置和获取HTML、文本、值
javascript中的innerText属性并不能在火狐浏览器中运行,但是jQuery的text()方法支持所有的浏览器
遍历节点
3 CSS-DOM操作
简单来说就是读取和设置style对象的各种属性。$("p").css("color"); //获取元素的样式颜色
$("p").css("color","red"); //将元素的样式颜色设置为红色
$("p").css({"backgroundColor":"red","font-size":"30px"}); //设置元素的多个样式css() 获取和设置元素样式
height()和width()均可以获取或设置元素的高度/宽度
元素定位操作
scrollLeft()、scrollTop()如果给定参数,则会控制元素的滚动条滚到指定位置。
1 javascript自身存在的三个弊端
复杂的文档对象模型、不一致的浏览器实现、便捷的开发、调试工具的缺乏。
2 javascript常见的库
Prototype | 对javascript内置对象做了大量扩展,也组合了很多有用的javascript方法 |
Dojo | 提供了很多独有功能:比如离线存储的API,生成图标的组件,基于SVG/VML的矢量图形和Comet支持等(适合企业级应用) |
YUI | 封装了许多有用的功能,例如DOM操作,和Ajax应用等,同时包含了几个核心的CSS文件 |
Ext Js | 原本是YUI的扩展,现在可以利用包括jQuery在内的多种javascript框架作为基础库 但因侧重于页面,其代码比较臃肿 |
MooTools | 轻量、简洁、模块化、面向对象、具有更好的扩展性,兼容性。模块化思想非常优秀,核心代码只有8kb |
jQuery | 轻量级,拥有强大的选择器,出色的DOM操作,可靠的事件处理、完善的兼容性和链式操作等功能 |
3对比
window.onload | $(document).ready() | |
执行时机 | 必须等网页所有内容加载完毕 | 网页中所有DOM结构绘制完毕后执行 |
编写个数 | 不能同时编写多个,只会执行最后一个 | 能同时执行多个,每个都有输出 |
$("#f")等价于jQuery("#f") $.ajax等价于jQuery.ajax
4 链式操作风格$(".level1>a).click(function(){
$(this).addClass("current") //给当前元素添加样式
.next().show() //下一个元素显示
.parent.siblings()children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除样式
.next().hide(); //他们的下一个元素隐藏
return false;
});5 jquery对象和DOM对象
(1)DOM对象,每一份DOM都可以表示成一棵树,可以通过javascript里面的getElementById或者getElementByTagName来获取元素节点,像这样得到的DOM元素就是DOM对象。
(2)jquery对象,通过jquery包装DOM对象后产生的对象
$("#f").html 等价于 document.getElementById("f").innerHTML;
在jquery对象中无法使用DOM对象里的任何方法。在DOM对象中无法使用jQuery对象里的任何方法。
错误 | 正确 (jQuery方法) |
$("#id").innerHTML | $("#id").html() |
$("#id").checked | $("#id").attr("checked") |
方法 | 例子 |
[index] | var $cr=$("#cr"); //jquery对象 var cr=$cr[0]; //DOM对象 |
get(index) | var $cr=$("#cr"); //jquery对象 var cr=$cr.get(0); //DOM对象 |
对于一个DOM对象,只需要把$()把DOM对象包装起来,就可以得到jQuery对象。
var cr=document.getElementById("cr"); //DOM对象
var $cr=$("#cr"); //jquery对象
实例研究:
DOM方式 | jQuery方式 |
var $cr=$("#cr"); //jquery对象 var cr=$cr[0]; //DOM对象 if(cr.checked) | var $cr=$("#cr"); //jquery对象 if($cr.is(":checked")) |
jquery的行为规则都必须在获取到元素之后才能生效
1 jQuery选择器的优势
(1)简洁的写法(2) 支持css1到css3选择器,也有自己独有的选择器 (3)完善的处理机制
用jQuery获取网页中不存在的元素也不会报错
需要注意的是
$("tt")获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在,不能用以下代码if ($("tt")){
//do something
}而是根据获取到的元素的长度来判断 或者转化成DOM对象if ($("tt").length){
//do something
}
if ($("tt")[0]){ //do something }2 jQuery选择器
<
4000
/span>
分为四大类:基本选择器 层次选择器 过滤选择器 表单选择器
(1)基本选择器
选择器 | 描述 | 示例 |
id选择器 | 根据id选取一个元素 | |
类选择器 | 根据类名选取一个元素 | |
标签选择器 | 根据标签名选取一个元素 | |
*(通配符) | 匹配所有元素 | |
并集选择器 | 将每一个选择器匹配到的元素合并后返回 | $("div,span,p.myClass) 选取所有的,<div> <span>和class为myClass的<p>标签 |
交集选择器 | 将选择器匹配到的元素的交集进行返回 | $(h2.current") 选取class为current的h2元素 |
选择器 | 描述 | 示例 |
后代元素 | 选取后代所有元素 | |
子元素 > | 选取子元素 | |
相邻元素 + | 选取下一个同辈元素 | |
同辈元素 ~ | 选取元素后面所有的同辈元素 |
$("prev~siblings")与nextAll()方法等价
但是 ,$("prev~siblings")只能选择prev元素后面的同辈元素,而siblings()方法与前后位置无关,只要是同辈节点都能匹配。
(3)过滤选择器
分类 | 选择器 | 描述 |
基本过滤选择器 | :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus | 选取第一个/最后一个/非/索引为偶数/奇数 选取索引=index/>index/<index 选取标题元素/正在执行动画的元素/当前获得焦点的元素 |
内容过滤选择器 | :contains(text) :empty :has(selector) :parent | 选取含有文本内容为“text”的元素 选取不包含子元素或者文本的空元素 选取含有selector元素的元素 选取含有子元素或者文本的元素 |
可见性过滤选择器 | :hidden :visible | 选取可见/不可见元素 |
属性过滤选择器 | [attribute] [attribute=value] [attribute!=value] [[attribute^=value][attribute$=value][attribute*=value] [attribute|=value] [attribute~=value] [attribute1][attribute2]...[attributeN] | 选取拥有此属性,属性等于value ,属性不等于value的元素 选取属性值以value开头、以value结束、含有value值的元素 选取属性值等于给定字符串或者以该字符串为前缀 用空格分割的值中含有一个给定值的元素 复合属性选择器,满足多个属性条件的选择器 |
子元素过滤选择器 | :nth-child(index/even/odd/equation :first-child :last-child :only-child | 选取父元素下的第index个子元素或者奇数偶数元素 选取父元素的第一个/最后一个元素 选取只有一个子元素的父元素的子元素 |
表单对象属性过滤选择器 | :enabled :disabled :checked :selected | 选取所有可用/不可用元素 选取所有被选中的元素(复选框、单选框) 选取所有被选中的选项元素(下拉列表) |
(4)表单选择器
选择器 | 描述 |
:input :text :password :radio :checkbox :button :submit :image :reset :file :hidden | 选取所有的<input><textarea><select><button>元素 选取所有的单行文本 选取密码框 选取单选框、多选框、按钮 选取提交按钮、图片按钮、重置按钮 选取所有的上传域 选取所有不可见元素 |
[/align]
1 DOM操作分类
DOM-core | javascript 中的getElementById(),getElementByTagName()都是DOM-core的组成部分 |
HTML-DOM | 提供了简明的记号描述各种HTML元素eg document.forms element.src |
CSS-DOM | 针对CSS的操作 主要作用是获取和设置style对象的的各种属性 |
节点操作
操作 | 方法 | 描述 |
查找节点 查找元素节点 查找属性节点 | $("") $selector.attr("") | |
创建节点 创建元素节点 创建文本节点 创建属性节点 | $(html) $("<li>文本</li>") $("<li title="1">文本</li>") | 传入HTML标记字符串 |
插入节点 内部插入 | $(A).append(B). $(A).appendTo(B). $(A).prepend(B). $(A).prependTo(B). | A B B A B A A B |
插入节点 外部插入 | $(A).after(B). $(A).insertAfter(B). $(A).before(B). $(A).insertBefore(B). | A B B A B A A B |
删除节点 | remove() detach() empty() | 删除该节点,该节点包含的后代节点也将被删除 删除节点后,其所有绑定的事件,附加的数据会保存下来 清空节点 位置还在 |
复制节点 | clone() | 如果传入参数true,则表示连该元素的所绑定的事件也一起复制 |
替换节点 | replaceWith() replaceAll() | 将匹配的元素换成指定的元素 颠倒了replaceWith()操作 |
包裹节点 | wrap() wrapAll() wrapInner() | 将某个节点用其它标记包裹起来 会将所有匹配的元素用一个标记包裹起来 将每一个匹配的元素的子内容用其它结构化的标记包裹起来 |
attr() | 获取和设置元素的属性 |
removeAttr() | 删除元素属性 |
attr(class) | 获取和设置样式 |
addClass() | 追加样式,会有样式叠加。如果不同class设置同一样式属性,后者覆盖前者 |
removeClass() | 移除样式 一个或多个均可 |
toggleClass() | 控制样式上的切换 如果类名存在则删除他,如果不存在则添加他 |
hasClass() | 判断元素中是否含有某个Class,返回布尔值 |
html() | 相当于javascript中的innerHTML | 获取html代码(如果有标签,标签也会输出) |
text() | 相当于javascript中的innerText | 读取或设置某个元素中的文本内容 |
val() | 相当于javascript中的value | 用来获取或设置元素的值 |
遍历节点
children() | 匹配元素的子元素集合 |
next() | 匹配元素后面紧邻的同辈元素 |
prev() | 匹配元素前面紧邻的同辈元素 |
siblings() | 匹配元素前后所有的同辈元素 |
closest() | 该方法取得最近的匹配元素 |
parent() parents() | 获得匹配元素的父元素(返回一个元素节点) 获得匹配元素的父元素一路查找(返回多个元素节点) |
简单来说就是读取和设置style对象的各种属性。$("p").css("color"); //获取元素的样式颜色
$("p").css("color","red"); //将元素的样式颜色设置为红色
$("p").css({"backgroundColor":"red","font-size":"30px"}); //设置元素的多个样式css() 获取和设置元素样式
获取元素的高度 | $(element).css(height) |
$(element).height() |
元素定位操作
offset() | 获取元素在当前视窗的相对偏移 返回的对象有两个属性,top 和left |
position() | 获取元素相对于最近的一个position样式属性为非定位的父节点的相对偏移 返回的对象有两个属性,top 和left |
scrollTop() | 获取元素的滚动条距顶端的距离 |
scrollLeft() | 获取元素的滚动条距左端的距离 |
相关文章推荐
- jQuery整理笔记八----jQuery的Ajax
- jQuery整理笔记七----几个经典表单应用 .
- jQuery学习笔记整理
- 锋利的jQuery 学习笔记-第一章 认识JQuery
- 锋利的JQuery 学习笔记
- jquery 工作笔记,不断整理中..
- 【学习笔记】锋利的jQuery(二)DOM操作
- 锋利的jQuery(第二版) 初读笔记
- 锋利的jquery学习笔记
- jQuery整理笔记七----几个经典表单应用
- 锋利的jQuery第2版学习笔记8~11章
- 锋利的jquery学习笔记 第二章
- jQuery整理笔记一----jQuery开始
- jQuery整理笔记2----jQuery选择整理
- 整理一下当年的学习笔记之:Jquery
- jQuery整理笔记二----jQuery选择器整理
- 锋利的Jquery(第二版)笔记(一)
- jQuery整理笔记七----几个经典表单应用
- jquery操作ul的一些操作笔记整理(干货)
- jQuery整理笔记五----jQuery事件