jQuery
选择器
基本选择器
层次选择器
属性选择器
标签选择器
- $(“标签名”)
id选择器
- $("#id名")
class选择器
- $(".类名")
群组选择器
- $(“选择器1, 选择器2, … , 选择器n”);
层次选择器
层次选择器
- M N 后代选择器，选择M元素内部后代N元素（所有N元素）
- M > N 子代选择器，选择M元素内部子代N元素（所有第1级N元素）
- M ~ N 兄弟选择器，选择M元素后面所有的同级N元素
- M + N 相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素）
属性选择器
E[attr] 选择元素E，其中E元素必须带有attr属性
E[attr = “value”] 选择元素E，其中E元素的attr属性取值是value
E[attr!= “value”] 选择元素E，其中E元素的attr属性取值不是value
E[attr ^= “value”] 选择元素E，其中E元素的attr属性取值是以“value”开头的任何字符
E[attr $=“value”] 选择元素E，其中E元素的attr属性取值是以“value”结尾的任何字符
E[attr *= “value”] 选择元素E，其中E元素的attr属性取值是包含“value”的任何字符
E[attr |= “value”] 选择元素E，其中E元素的attr属性取值等于“value”或者以“value”开头
E[attr ~= “value”] 选择元素E，其中E元素的attr属性取值等于“value”或者包含“value”
伪类选择器
1. “位置”伪类选择器
- :first 选取某种元素的第一个
- :last 选取某种元素的最后一个
- :odd 选取某种元素中序号为“奇数”的所有元素，序号从0开始
- :even 选取某种元素中序号为“偶数”的所有元素，序号从0开始
- :eq(n) 选取某种元素的第n个，n是一个整数，从0开始
- :lt(n) 选取某种元素中小于n的所有元素，n是一个整数，从0开始
- :gt(n) 选取某种元素中大于n的所有元素，n是一个整数，从0开始
2. “子元素”伪类选择器
-
:first-child、:last-child、:nth-child(n)、:only-child
- E:first-child 选择父元素下的第一个子元素（子元素类型为E，以下类同）
- E:last-child 选择父元素下的最后一个子元素
- E:nthchild(n)选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd、even，n从1开始
- E:only-child 选择父元素下唯一的子元素，该父元素只有一个子元素
-
:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type
- E:first-of-type 选择父元素下的第一个E类型的子元素
- E:last-of-type 选择父元素下的最后一个E类型的子元素
- E:nth-oftype(n)选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字、odd、even
- E:only-of-type 选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素
3. “可见性”伪类选择器
- :visible 选取所有可见元素
- :hidden 选取所有不可见元素
4. “内容”伪类选择器
- :contains(text) 选取包含指定文本的元素
- :has(selector) 选取包含指定选择器的元素
- :parent 选取含有文本或者子元素的元素
- :empty 选取不含有文本以及子元素的元素，即空元素
5. “表单”伪类选择器
- :input 选取所有input元素
- :button 选取所有普通按钮，即
- :submit 选取所有提交按钮，即
- :reset 选取所有重置按钮，即
- :text 选取所有单行文本框
- :textarea 选取所有多行文本框
- :password 选取所有密码文本框
- :radio 选取所有单选框
- :checkbox 选取所有复选框
- :image 选取所有图片域
- :file 选取所有文件域
6. “表单属性”伪类选择器
- :checked 选取所有被选中的表单元素，一般是单选框或复选框
- :selected 选取被选中的表单元素的选项，一般是下拉列表
- :enabled 选取所有可用的表单元素
- :disabled 选取所有不可用的表单元素
- :read-only 选取所有只读的表单元素
- :focus 选取所有获得焦点的表单元素
7.其他伪类选择器
- :not(selector) 选取除了某个选择器之外的所有元素
- :animated 选取所有正在执行动画的元素
- :root 选取页面根元素，即html元素
- :header 选取h1~h6的标题元素
- :target 选取锚点元素
- :lang(language) 选取特定语言的元素
过滤方法
类名过滤：hasClass()
- $().hasClass(“类名”)
下标过滤：eq()
- $().eq(n)
判断过滤：is()
- $().is(selector)
反向过滤：not()
- $().not(selector或fn)
选择器过滤filter
- $().filter(selector)
has()方法
- $().has(selector)
查找祖先元素
parent()
- $.parent(selector)
parents()
- $().parents(selector)
parentsUntil()
- $().parentsUntil(selecotr)
查找后代元素
children()
- $().children(selector)
find()
- $().find(selector)
向前查找兄弟元素
prev()
- $().prev()
prevAll()
- $().prevAll(selector)
prevUntil()
- $().prevUntil(selector)
向后查找兄弟元素
next()
- $().next()
nextAll()
- $().nextAll(selector)
nextUntil()
- $().nextUntil(selector)
查找所有兄弟元素
$().siblings(selector)
DOM
1. 创建元素
2. 插入元素
3. 删除元素
4. 复制元素
5. 替换元素
6. 包裹元素
7. 遍历元素
DOM创建元素
1. prepend()和prependTo()
- $(A).prepend(B)表示往A的内部开始处插入B
- $(A).prependTo(B)表示将A插入到B内部的开始处
2. append()和appendTo()
- $(A).append(B)表示往A的内部末尾处插入B
- $(A).appendTo(B)表示将A插入到B内部的末尾处
3. before()和insertBefore()
- $(A).before(B)表示往A的外部前面插入B
- $(A).insertBefore(B)表示将A插入到B外部的前面
4. after()和insertAfter()
- $(A).after(B)表示往A的外部后面插入B
- $(A).afterBefore(B)表示将A插入到B外部的后面
删除元素
remove()
- $().remove()
detach()
- $().detach()
empty()
- $().empty()
复制元素
$().clone(boolean)
-
- true：表示不仅复制元素，并且还会复制元素所绑定的事件。
-
- false：表示仅仅复制元素，但不会复制元素所绑定的事件。
替换元素
replaceWith()
- $(A).replaceWith(B)表示使用B来替换A
replaceAll()
- $(A).replaceAll(B)表示用A来替换B
包裹元素
wrap()
- $(A).wrap(B)表示将A元素使用B元素包裹起来
wrapAll()
- $(A).wrapAll(B)说明所有A被一个B包裹
wrapInner()
- $(A).wrapInner(B)表示将A元素“内部所有元素以及文本”使用B元素包裹起来
遍历元素
使用each()方法轻松实现元素的遍历操作
语法：
- $().each(function(index, element){
……
})
DOM属性操作
获取属性
- $().attr(“属性名”)
设置属性
- //设置一个属性$().attr(“属性”, “取值”)
- //设置多个属性$().attr({“属性1”: “取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”})
删除属性
- $().removeAttr(“属性名”)
prop()方法
- 如checked、selected或disabled等建议使用prop()来操作其他的属性都建议使用attr()来操作
DOM样式操作
CSS属性操作
- $().css(“属性名”)
设置属性
- //设置一个属性$().css(“属性”, “取值”)
- //设置多个属性$().css({“属性1”:“取值1”, “属性2”:“取值2”, …, “属性n”:“取值n”})
CSS类名操作
-
- 添加class
- $().addClass(“类名”)
-
- 删除class
- $().removeClass(“类名”)
-
- 切换class
- $().toggleClass(“类名”)
其他样式操作
-
- width()和height()
-
width() width
-
height() height
- $().width() //获取元素宽度
- $().width(n) //设置元素宽度，n是一个整数，表示n像素
- $().height() //获取元素高度
- $().height(n) //设置元素高度，n是一个整数，表示n像素
-
- innerWidth()和innerHeight()
- innerWidth() width + padding
- innerHeight() height + padding
-
- outerWidth()和outerHeight()
- outerWidth() width + padding + border
- outerHeight() height + padding + border
-
元素的位置
-
1.offset()
- $().offset().top
- $().offset().left
-
2.position()
- $().position().top
- $().position().left
-
滚动条的距离
- $().scrollTop() //获取滚动距离
- $().scrollTop(n) //设置滚动距离，n是一个整数，表示n像素
-
DOM内容操作
html()
- $().html() //获取html内容
- $().html(“html内容”) //设置html内容
text()
- $().text() //获取文本内容
- $().text(“文本内容”) //设置文本内容
val()
- $().val() //获取值
- $().val(“值内容”) //设置值
鼠标事件
click 鼠标单击事件
mouseover 鼠标移入事件
mouseout 鼠标移出事件
mousedown 鼠标按下事件
mouseup 鼠标松开事件
mousemove 鼠标移动事件
事件基础
JavaScript的onload事件
- window.onload = function(){
……
}
jQuery的ready事件
- $(document).ready(function(){
……
})
ready事件的4种写法
- $(document).ready(function(){
……
}) - jQuery(document).ready(function(){
……
}) - $(function(){
……
}) - jQuery(function(){
……
})
深入了解jQuery的ready事件
- window.onload只能调用一次，如果多次调用，则只会执行最后一个
键盘事件
keydown
keyup
表单事件
focus和blur
- focus表示获取焦点时触发的事件
- blur表示失去焦点时触发的事件
select
- 选中“单行文本框”或“多行文本框”中的内容时，就会触发select事件
change
-
change事件常用于“具有多个选项的表单元素”。
-
用处
- 单选框选择某一项时触发
- 复选框选择某一项时触发
- 下拉菜单选择某一项时触发
编辑事件
编辑事件
-
.contextmenu
- 禁用鼠标右键
滚动事件
滚动事件
- $().scroll(function(){
……
})
绑定事件
on()方法为“已经存在的元素”绑定事件
on()方法为“动态创建的元素”绑定事件
解绑事件
$().off(type)
合成事件
合成事件
- $().hover(fn1, fn2)
一次事件
- $().one(type, fn)
自定义事件
trigger()方法来触发自定义事件
事件对象
event.type 事件类型
event.target 事件元素
event.which 鼠标左、中、右键
event.pageX、event.pageY 鼠标坐标
event.shiftKey 是否按下shift键
event.ctrlKey 是否按下ctrl键
event.altKey 是否按下alt键
keyCode 键码值
this
this始终指向触发当前事件的元素。
index()方法
$().index()
链式调用
链式调用一般针对的是同一个jQuery对象
jQuery动画
显示与隐藏
- $().show(speed, fn)
- $().hide(speed, fn)
toggle()
- $().toggle(speed, fn)
淡入与淡出
fadeIn()和fadeOut()
- $().fadeIn(speed, fn)
- $().fadeOut(speed, fn)
fadeToggle()
- $().fadeToggle(speed, fn)
fadeTo()
- $().fadeTo(speed, opacity, fn)
滑上与滑下
slideUp()和slideDown()
- $().slideUp(speed, fn)
- $().slideDown(speed, fn)
slideToggle()
- $().slideToggle(speed, fn)
自定义动画
简单动画
- $().animate(params, speed, fn)
累积动画
- 结合+=和-=这两个运算符来实现累积动画
- $("#box2").animate({ “width”: “+=100px”, “height”: “+=100px” },
回调函数
队列动画
$().animate().animate().…….animate()
停止动画
$().stop(stopAll, goToEnd)
- stop() 等价于stop(false, false)，仅停止当前动画，后面的动画还可以继续执行
- stop(true) 等价于stop(true,false)，停止当前动画，并且停止后面的动画
- stop(true, true) 当前动画继续执行，只停止后面的动画
- stop(false, true) 停止当前动画，跳到最后一个动画，并且执行最后一个动画
延迟动画
$().delay(speed)
判断动画状态
if(!$().is(":animated"))
{
//如果不处于动画状态，则添加新的动画，:animated是一个伪类选择器，表示选取所有正在执行动画的元素
}
load()方法
load(url,data,function(response,status,xhr))
url 必选参数，表示被加载的页面地址
data 可选参数，表示发送到服务器的数据
fn 可选参数，表示请求完成后的回调函数
response - 包含来自请求的结果数据
status - 包含请求的状态（“success”, “notmodified”, “error”, “timeout” 或 “parsererror”）
xhr - 包含 XMLHttpRequest 对象
说明
-
- 在load()方法中，无论AJAX请求是否成功，只要当请求完成（complete）后，回调函数（fn）都会被触发
-
- load()方法一般只会用到第1个参数，很少会用第2和第3个参数。
-
- load()一般是用来向服务器请求静态的数据文件。在实际开发中，如果需要传递一些参数给服务器中的页面，应该使用.get()、.post()或$.ajax()。
$.get()方法
$.get(url, data, fn, type)
- url 必选参数，表示被加载的页面地址
- data 可选参数，表示发送到服务器的数据
- fn 可选参数，表示请求成功后的回调函数
- type 可选参数，表示服务器返回的内容格式
$.post()方法
$.post(url, data, fn, type)
- url 必选参数，表示被加载的页面地址
- data 可选参数，表示发送到服务器的数据
- fn 可选参数，表示请求成功后的回调函数
- type 可选参数，表示服务器返回的内容格式
$.getJSON()方法
$.getJSON(url ,data, function(data){
……
})
$.getScript()方法
$.getScript(url, fn)
- url 必选参数，表示被加载的JavaScript文件路径
- fn 可选参数，表示请求成功后的回调函数
优点
-
- 异步跨域加载JavaScript文件。
-
- 可避免提前加载JavaScript文件，只有需要的时候才会去加载。这样可以减少服务器和客户端的负担，加快页面加载速度。
$.ajax()方法
$.ajax(options)
- url 被加载的页面地址
- type 数据请求方式，“get"或"post”，默认为"get"
- data 发送到服务器的数据，可以是字符串或对象
- dataType 服务器返回数据的类型，如：text、html、script、json、xml
- beforeSend 发送请求前可以修改XMLHttpRequest对象的函数
- complete 请求“完成”后的回调函数
- success 请求“成功”后的回调函数
- error 请求“失败”后的回调函数
- timeout 请求超时的时间，单位为“毫秒”
- global 是否响应全局事件，默认为true（即响应）
- async 是否为异步请求，默认为true（即异步）
- cache 是否进行页面缓存，true表示缓存，false表示不缓存
3404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
