属性选择器:
[attribute][attribute=value]// 属性等于 列入 $("input[value='male']").prop('chekced') 注意符号单引号双引号 判断单选框中 性别为男是否被选中 返回值为 false则为没有选中。[attribute!=value]// 属性不等于
例子:
// 示例$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签
隔行变色例子:
主要就是这一行: $('tr:even').addClass('h2'); 找到偶数行,添加class属性
各行变色
# | 姓名 | 年龄 |
---|---|---|
1 | egon | ds |
2 | alex | ss |
3 | jinxing | ww |
4 | yuanhao | cc |
表单常用筛选:
:text:password :file
:radio:checkbox :submit:reset:button
例子:
$(":checkbox") // 找到所有的checkbox
表单对象属性:
:enabled:disabled:checked checkbox 筛选出中被选中的 用法 $(':checked') 找到被选中的ckeckbox:selected
例子:
$("input:enabled") // 找到可用的input标签
$(":selected") // 找到所有被选中的option
筛选器
下一个元素:
$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2")
上一个元素:
$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")
父亲元素:
$("#id").parent() 推荐用 .parent().parent() 这种方式,直到找到对应的父标签。$("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:
$("#id").children();// 儿子们$("#id").siblings();// 兄弟们
查找元素:
$("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。当记不清后代关系的时候可以用着个来找后代 $("#id").find('.delete')
补充:
.first()// 获取匹配的第一个元素 如 $('li').frist();这个最常用 等价于 $('li:first()');.last()// 获取匹配的最后一个元素.not()// 从匹配元素的集合中删除与指定表达式匹配的元素.has()// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
示例:左侧菜单 支持链式操作 一句话能够实现很多功能
Title 菜单一菜单二菜单三p
jQurey对象和DOM对象的相互转化:*****
操作标签
样式操作
样式类
addClass();// 添加指定的CSS类名。 addClass('hide') removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
示例:开关灯和模态框
CSS
css("color","red")//DOM操作:tag.style.color="red" 设置多个属性 .css({"color":'red',"border":'5px solid red'})
示例:
$("p").css("color", "red"); //将所有p标签的字体设置为红色 获取某种属性:$('p').css('color')
位置:
offset()// 获取匹配元素在当前视口的相对偏移position()// 获取匹配元素相对父元素的偏移scrollTop()// 获取匹配元素相对滚动条顶部的偏移scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
注 意
position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。
offset()始终返回相对于浏览器文档的距离,它会忽略外层元素。
在父级标签含有相对位置属性的时候 ↓
示例:
Title
尺寸:
height() 盒子模型的内容的高width()innerHeight() 包含内padding的高innerWidth()outerHeight() 包含border的高度outerWidth()
文本操作
HTML代码:
html()// 取得第一个匹配元素的html内容html(val)// 设置所有匹配元素的html内容
文本值:
.text()// 取得所有匹配元素的内容.text(val)// 设置所有匹配元素的内容 如 $('li').last().text('200'); 给li中最后个的值设置为200
值:
.val()// 取得第一个匹配元素的当前值 如 $('input').val() 当有多个 chrckbox 框时别选中时 如足球篮球都要背选中但是只显足球 取值默认取出第一个框中的值 $('input').val('4') 但是设置值的时候是给所有的都设置成4.val(val)// 设置所有匹配元素的值 如 $('input').val(); 获取input框中的value值.val([val1, val2])// 设置checkbox 、select的值 一样可以设置选定的值
示例:
设置让城市选择两个
重要
自定义登录校验
文本操作之登录验证
属性操作
用于自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值 如 $('#d1').attr('egon'); 可以取出自己设置的属性egon 中的值attr(attrName, attrValue)// 为所有匹配元素设置一个属性值attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() 当取到属性为true或者false时 推荐用prop removeProp()
重要
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
上面的描述也许有点模糊,举几个例子就知道了。
这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。
这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。
注意:
在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked", "checked")。
示例:全选、反选、取消
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith()replaceAll()
克隆
clone()// 参数
示例:
点击按钮复制。
事件
常用事件
click(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})change(function(){...})keyup(function(){...})
事件绑定
.on( events [, selector ],function(){})
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])
off()
方法移除用[ .on()
绑定的事件处理程序。
- events: 事件
- selector: 选择器(可选的)
- function: 事件处理函数
阻止后续事件执行
return false;// 常见阻止表单提交等
页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
两种写法:
$(document).ready(function(){// 在这里写你的JS代码...})
简写:
$(function(){// 你在这里写你的代码})
列子:点击回顶部
位置相关示例之返回顶部 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100返回顶部示例