$(document).ready()与windows.onload 异同
$(document).ready():
DOM文档结构绘制完成即即刻执行,可能某些静态
资源(图片,视频)还没加载完
同一个页面,可以写多个
window.onload():
必须等待网页中所有静态资源(图片,视频)都
加载完毕后才执行
同一个页面,不可以写
$("li:even").chilk() :
$() : 工厂函数 将DOM对象变为jQuery对象
"li:even" : 选择器,获取需要 *** 作的DOM元素
通常用#ID名调用
even : 偶数
odd : 奇数
chick() : 方法 绑定事件处理的方法
addClass() : 添加样式(以类名添加样式)
css() : 直接设置元素样式
show() : 元素的显示
hide() : 元素的隐藏
链式 *** 作:
对一个对象进行多重 *** 作,并经 *** 作结构返回给对象
当选择器种的元素和要修改样式的元素一致时
可以用(this)代替!
隐式迭代:
js会循环代选中的元素,进行元素样式的改变
$('#first'):
可以由JQ对象直接通过id找到对应的元素节点
$v.html():
html() -> 获取该元素的html值
DOM对象 转化成JQ 对象
通过JQ对象包裹住DOM对象达到转换的需求
JQ对象转换为DOM对象
JQ对象是一个数组对象,可以通过[index]下标
获取相应的DOM对象
对象是包含相关属性和方法的集合体
对象分为:
自定义对象
内置对象
自定义对象
基于Object对象的方式创建对象
构造函数:
使用一个构造函数,来创建多个对象
减少冗余代码
步骤:
第一步:
创建特定的类型的对象
第二步:
this变量 赋值
第三步:
New *** 作符 创建
jQuery选择器类似于我们的css选择器
功能强大,种类繁多
1.通过css选择器选取元素
1)基本选择器
2)层次选择器
3)属性选择器
2.通过过滤选择器选取元素
1)基本过滤选择器
2)可见性过滤选择器
JQ标签选择器
根据给定的标签匹配元素
例如当前是 选中所有的dt标签
类选择器
根据给定的class名匹配元素
ID选择
根据给定的id名匹配元素
并集选择器
将每一个选择器匹配的元素合并一起返回
每一个选择器用 ' , '隔开
全局选择器
匹配所有的元素
后代选择器 A B
选中前一个元素的所有后代元素
子选择器 A>B
选取父元素下的子元素
相邻元素选择器 A+B
选取第一个元素之后的下一个同辈元素
同辈选择器 A~B
选中A之后的所有元素B的元素
属性选择器：
1):根据是否包含某属性来选取元素
a[class] : a标签是否包含class属性
2):根据属性的值来选取元素
a[href='hot'] : 选取class值等于hot的元素
3):选取指定不等于class值的元素
a[href!='hot'] : 选中href值不等于hot的元素
4):选取属性值以自定值开头的元素
a[href^='sale'] : 选中href值以sale开头的元素
5):选取属性值以指定结尾的元素
a[href$='com'] : 选中href值以com结尾的元素
6):选取属性值包含指定值的元素
a[href*='id'] : 选中href值包含id的元素
过滤选择器
1):li:first
选取第一个li元素
2):li:last
选取最后一个li元素
3):li:not(.first)
选取去除所有于给定选择器匹配的元素
4):li:even
选取指定元素下标为偶数的元素
5):li:add
选取指定元素下标为奇数的元素
他们都是按照下标开始排序的(index从0开始)
6):li:eq(index)
选取下标为index的元素 eq:等于
7):li:lt(2)
选取下标小于2的元素
8):li:gt(2)
选取下标小于2的元素
9):$("header")
选取所有的标题元素
10):$("focus")
选取当前获取焦点的元素 可以当方法使用于blur一起使用
11):$(animated)
选取当前所有的动画元素
12):blur //方法
选取当前失去的鼠标焦点的元素,于focus搭配使用
可见性过滤选择器
1)$(p:hidden)
选取p标签内所有隐藏的元素
2)$(p:visible)
选取p标签内所有显示的元素
3)find()
获取当前元素集合中的每一个元素的后代
然后通过选择器来筛选
事件与动画
鼠标事件
chick() 单机鼠标时执行
mouseover() 鼠标指针移过时
mouseout() 鼠标指针移出时
mouseenter() 鼠标指针进入时
mouseleave() 鼠标指针离开时
键盘事件
keydown() 按下键盘时
keyup() 释放键盘时
keypress() 产生可打印的字符时
浏览器事件
resize 调整窗口大小时,完成页面特效
绑定事件
bind():
为被选元素添加一个或多个事件处理程序
eg:
键盘点击事件登录
键盘回车登录
bind(type,[data],fun)
type : 事件类型 包括了click,mouseover等
必须项
[data] : 可选函数 非必填项
fun : 处理函数 必填项
事件绑定 多个函数
bind({type:fun,type:fun,....})
移除事件
unbind([type]):
type: click mouseout等
当unbind不携带任何参数
时表示移除了所绑定的全部事件
复合事件
toggle() : 模拟鼠标连续点击事件
在jq1.2版本废弃,改用了jq1.8版本
toggle(fun1,fun2,fun3):
按顺序执行点击事件fun
toggle() 无参
与我们 show() 和hide() 方法作用一样
toggleClass()
对所选元素进行的切换
show(speed)
hide(speed)
控制元素的显隐, speed代表了速度
number : 单位时 ms 毫秒
slow : 缓慢的
normal : 正常的
fast : 快速的
fadeIn(speed) 通过改变元素的透明度实现淡入
fadeOut(speed) 通过改变元素的透明度实现淡出
speed :
number : 单位是 ms 毫秒
slow : 缓慢的
normal : 正常
slideDown(speed) 可以使元素逐步延申显示
slideUp(speed) 是元素逐步缩短直至隐藏
speed :
number : 单位是 ms 毫秒
slow : 缓慢的
normal : 正常的
fast : 快速的
hover : 符合事件
相当于mouseover与mouseout事件的组合
hover(
function(){//移入
},
function(){//移出
},
)
DOM *** 作分类
DOM Core:
任何一种坚持DOM的编程语言都可以使用它
HTML-DOM:
用于处理HTML文档
CSS-DOM:
用于 *** 作CSS
设置样式
css()
addClass() ---添加样式
removeClass() ---移除样式
toggleClass()
hasClass() ---判断是否包含指定样式
一般和移除样式(removeClass)一起
使用
关于内容 *** 作分为3类
*** 作HTML代码
用于 html()
对HTML代码进行 *** 作
类似与JS中的innerHTML
html()分为有参和无参两种形式
无参数:
用于获取第一个匹配元素的
HTML内容
有参数:
用于设置所有匹配元素的
HTML内容
*** 作标签内容
text()
获取或设置元素的文本内容
无参数:
用于获取所有匹配元素的文本
有参数:
用于设置所有匹配的文本
*** 作属性
val():
获取或设置元素的value属性值
一般作用于input框中的value
属性的值的获取
A.append(B) 将B追加到A中(最高的)Last
$("ul").append($newNode1) 将$newNode1追加到ul中(最高的)Last
A.appendTo(B) 将A追加到B中
A.prepend(B) 将B前置插入到A中(最矮的)first
$("ul").prepend($newNode2) 将$newNode2追加到ul中(最矮的)first
A.prepend(B) 将A插入到B中
A.after(B) 将B插入到A之后(同辈的形式)
A.insetAfter(B) 将A插入到B之后(同辈的形式)
$("ul").after($newNode3) 将$newNode3插入ul之后(同辈的形式)
A.before(B) 将B插入到A之前(同辈的形式)
A.insetBefore(B) 将A插入到B之前(同辈的形式)
$("ul").before($newNode4) 将$newNode4插入到ul之前(同辈的形式)
remove() : 删除整个节点
$(".gameList li:eq(1)").remove;删除.gameList中下标为1的li节点
emty() : 删除节点中的文本内容
$(".gameList li:eq(1)").emty;删除.gamneList中下标为1的li中的文本内容
A.replaceAll(B);表示将B替换成A
A.replaceWith(B);表示将A替换成B
复制节点:clone(boolean)
boolean : true
不仅复制节点 而且复制节点所绑定的事件
boolean : false
只复制节点,不复制绑定事件
attr("属性名");获取元素属性
根据属性名获取对应的属性值
设置元素属性
attr({样式名:样式值,样式名:样式值,...})
删除属性
removeAttr("属性名")
删除指定属性
remove和detach的区别
remove删除整个节点 并包含绑定事件
detach删除整个节点 但是保留绑定事件
和附加数据
children() : 遍历子元素--获取所有的子元素
next() : 用于获取紧邻匹配元素之后的元素
prev() : 用于获取紧邻匹配元素之前的元素
siblings() : 用于获取位于匹配元素前后所有的同辈元素
parent() : 获取匹配元素的父级元素
parents() : 获取匹配元素的祖先元素
each() : 为每一个匹配的元素循环遍历要执行的函数
end() : 结束当前最近的筛选条件,并将匹配的元素还
原之前的状态
input:focus::placeholder{
opacity: 0;
}该方法用于将input框中的提示信息点击后变为透明,离开点击后再恢复其之前状态用于css中使用。
CSS-DOM:
css():
当具有固定的属性值和属性名时,表示的
是设置匹配元素的样式
css("width","200") 设置一个200高度
而当只有属性名时,会返回匹配元素的
样式值
height():
设置并返回匹配元素的高度
height() : 返回高度值
hieght("1000") : 设置高度值
width():
设置并返回匹配元素的高度
width() : 返回宽度值
width(1000) : 设置宽度值
scroll():
当用户滚动指定元素时,会执行
该方法
offset():
返回以像素为单位的top和left坐标
(返回匹配元素的外边距的偏移量)
position():
返回当前元素在没有定位的元素时
以浏览器窗口为标准
而有定位的父元素时,则以对父元素为标准
offsetParent:
返回最近的以经定位的祖先元素
定位元素指的是,元素css position设置
相对,绝对和定位的元素
而如果没有定位元素,则会直接找到HTML标签
表单选择器
1.为什么要表单验证
减轻服务压力
保证输入的数据符合要求
2.表单的选择器
1) :input匹配所有input、textarea
select和button元素
2) :text匹配所有单行文本框(type='text')
3) :password匹配所有的密码框(type='password')
4) :radio匹配所有的单选按钮(type='radio')
5) :checkbox匹配所有多选按钮(type='checkbox')
6) :submit匹配所有的提交按钮
7) :reset匹配所有的重置按钮
8) :image匹配所有的图像域
9) :file匹配有的文件域
10) :button匹配所有的普通按钮
11) :hidden匹配所有的不可见元素 和type类型为hidden的元素
3.属性过滤选择器
1) :disabled 匹配所有的禁用元素
2) :enabled 匹配所有的未禁用元素
3) :selected 匹配所有选中的option
4) :chexked 匹配被选中的元素
4.表单的提交事件
1) :retrun false 不提交表单
2) :retrun true 提交表单
3) :String对象的indexOf方法
返回某字符首次出现的位置
如果没有该字符则返回 -1
一般用indexOf进行字符
是否存在判断
5.鼠标获取与失去光标
focus(): 从文本域中设置焦点
即获取鼠标光标
blur(): 从文本域中设置焦点
即失去鼠标光标
两者皆属于方法
6.正则表达式符号
1)/.../ : 表示一个表达式的开始和结束
一般包裹表达式
2) ^ :匹配字符串的开始
3) $ :匹配字符串的结束
4) [n-m] :区间范围 最小是n 最大是m
4.1)
[0-9] : 纯数字
[a-z] : 小写字母
[A-Z] : 大写字母
可以拼接不需要任何字符
[0-9a-zA-Z]
5) \d : 匹配一个数字字符 等同于[0-9]
6) {n} : 匹配前一项n次
7) ? : 匹配前一项0次或者1次 等价于{0,1}
8) \D : 匹配除了数字、下划线或字符字母等价于[^0-9]
9) \w(小) : 匹配一个数字、下划线或字符字母等价于[A-Za-z0-9_]
10) \W(大) : 匹配任何非单子符 等价于[^a-zA-Z0-9]
11) \s(小) : 匹配任何空白字符
12) \S(大) : 匹配任何非空白字符
13) {n,m} : 匹配前一项至少n次,但不能超过m次
14) {n,} : 匹配前一项n次,或者多次
15) * : 匹配前一项0次或多次 等价于{0,}
16) + : 匹配前一项1次或多次 等价于{1,}
17) .(点) : 匹配除了换行符之外的任意字符
验证属性
1):required : 规定当前输入域不能为空
2):placeholder:提示一种提示,输入域为空时显示
获取焦点输入内容消失后
3):pattern:规定验证input域的模式(正则表达式)
如果直接写到input中,无需加上/^$/
等开头结尾
4):valueMissing:判断required特性,返回true和false
5):typeMismatch:判断输入值和type类型是否符合(将type换成pattern时判断的将是正则表达式),返回true和false
6):patternMismatch:判断输入值是否符合正则效验,返回true和false
7):setCustomValidity:设置自定义提示信息
8):validity:验证函数,格式:validity.type(pattern)Mismatch
动画改变方法
animate() 方法 执行CSS属性的自定义动画
该方法通过改变css样式的属性值才可以创建动画
margin之类的可以创建动画的
关于背景之类的无法创建动画
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）