您的位置:首页 > 其它

jqeury 基础

2016-08-19 11:32 281 查看
jquery
选择器:

基本选择器:#id 、.class、*(匹配所有)
层次选择器:
$(div span) 选取<div>里的所有的<span>元素、
$(div>span) 选取<div>元素下的元素名是<span>的子元素
$(div+span) 选取div元素的下一个同辈元素
$(div~span) 选取div元素的后面所有同辈元素
过滤选择器
基本选择器:
:first   $("div:first")选取所有<div>元素中第1个<div>元素
:last
:not(selector)  $("input:not(.myclass)")选取clss不是muclass的input元素
:even  偶数 从0开始
:odd   奇数 从0开始
:eq(index) 选取索引等于index的元素 (index是从0开始) $("input:eq(1)")
:gt(index) 大于
:it(index) 小于
:header  选取所有有标题元素
:animated 选取当前正在执行动画的所有元素
:focus 选取当前获取焦点的元素
内容过滤选择器
:contains(text) 选取文本内容为"text"的元素  $("#div:contains('我')")
:empty   选取不包含子元素或者文本的空元素
:has(selector)选取含有选择器锁匹配的元素的元素  $("div:has(p)") 选取含有p元素的div
:parent 选取含有子元素或者文本的元素

可见性过滤选择器
:hidden    :visible

属性过滤选择器
[attribute] 选取拥有此舒心的元素   $("div[id]")
[attribute=value] 选取属性的值为value 的元素  $("div[title=test]")
[arrtibute!=value] 选取属性的值不为value 的元素  $("div[title!=test]")

子元素过滤选择器
:first-child 选取每个父元素的第1个子元素  $("ul li:first-child")
:last-child
:nth-chid(index)

表单对象属性过滤选择器

:enabled  选取所有可用元素
:disabled 选取所有不可用元素
:checked
:selected

表单选择器
:input 选取所有<input>元素
:text
:password
:radio
:checkbox
:submit
:imgage
:reset  获取所有重置按钮
:button
:file 选取所有上传域
:hidden

show() 显示隐藏的匹配元素
css(name,value) 给元素设置样式
text(string)设置所有匹配元素的文本内容
filter(expr)筛选出指定表达式匹配的元素集合,其中expr可以是多个选择器的组合、 是对自身集合元素筛选
fint()会在元素内寻找匹配元素,对它的自己操作
例如:<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>

var $find = $("div").find(".rain");
alert( $find.html() ) ; //输出测试2
var $filter = $("div").filter(".rain");
alert( $filter.html() ); ////输出测试 <p>测试2</p>

addClass(class)为匹配元素添加指定的类名

jquery DOM

增:
append() 向每个匹配元素内部追加内容
after()向每个匹配元素之后追加内容
before() 向每个匹配元素之前追加内容
删:
remove()    $("ul li:eq(1)").remove();
清空:
empty()  清空节点   $("ul li:eq(1)").empty()
包裹:
wrap() 将某个节点用其他标记包裹起来   $("strong").wrap("<b></b>")  // 用<b> 标签把<strong>元素包裹起来

属性操作

attr()方法来获取和设置元素属性。  var p=$("p").attr("tilte");  // 获取<p> 元素节点属性title
removeAttr() 方法来删除元素属性。
addClass() 追加样式
removeClass() 移除样式
hasClass() 是否包含样式
toggle() 交替一组动作
html() 获取元素的html内容,相当于innerhtml
text() 获取元素的文本内容,相当于innerText
val() 取值

遍历节点
children() 获取匹配元素的子元素集合
next() 获取匹配元素后面紧临的同辈元素
prev()获取匹配元素前面紧临的同辈元素
siblings获取匹配元素前后面紧临的同辈元素
parent 获取集合元素的父级元素
parents 获取集合元素的祖先元素

事件:
bind() //绑定事件

window.load() 与$(documnet).ready的区别
window.load()是需要页面中的说有元素、图片、链接都加载完成之后才可以触发。
而$(documnet).ready是不要求页面完全加载完,只需要加载完dom机构就可以触发
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: