1. 样式操作:
(1) 使用css()为指定的元素设置样式值或获取样式值
- css(name,value)
$(this).css(display,block)
- css({name1:value1,name2:value2})
$(this).css({opacity:'0.5',display:block})
(2) 追加样式
1.$(this).addClass(class)
$(this).addClass("content")
2.$(this).addClass(class1 … classN)
$(this).addClass("content border")
(3) 移除样式
1.$(this).removeClass(class)
$(this).removeClass(content)
2.$(this).removeClass(class...classN)
$(this).removeClass("content border")
(4) 切换样式
1.$(this).toggleClass(class)
$(this).toggleClass(content)
2.$(this).toggleClass(class...classN)
$(this).toggleClass("content border")
(5) 判断是否含指定的样式
1.$(this).hasClass(class)
$(this).hasClass(content)
2. 内容操作
(1) html代码操作
$(this).html() --- 获取元素中的html代码
$(this).html("<div class='content'>…</div>") ---设置元素中的html代码
(2) 文本类容操作
$(this).text() --- 获取元素中的文本
$(this).text("<div class='content'>…</div>") --- 设置元素中的文本
3. 属性值操作
$(this).val() --- 获取元素的value属性值
$(this).val(value) --- 设置元素的value属性值
ps: $(this).val('') 清空需要添加引号,如果val方法括号中不添加任何内容,是获取val值
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
}) --- 获得焦点的事件
$("input").blur(function(){
$("input").css("background-color","#FFFFCC");
})--- 失去焦点的事件
4. 节点操作
(1) 获取节点
$(this).parent() --- 找父亲节点,距离最近的父元素
$(this).parent(".selected") --- 查找每个段落(距离元素最近的上一级)的带有 "selected" 类的父元素
$(this).parents(".selected") --- 查找所有带有 "selected" 类祖先元素
$(this).children(".selected") --- 返回所有直接子节点,不会返回所有的子孙节点
$(this).contents() --- 返回下面的所有内容,包括节点和文本。
$(this).prev() --- 返回上一个兄弟节点,不是所有的兄弟节点
$(this).prevAll() --- 返回所有之前的兄弟节点
$(this).next() --- 返回下一个兄弟节点,不是所有的兄弟节点
$(this).nextAll() --- 返回所有之后的兄弟节点
$(this).siblings() --- 返回兄弟节点,不分前后
$(this).find(".selected") --- $("div").find("p"),是从<div>元素找<p>,等同于$("div p")
$(this).filter(),--- 方法返回符合一定条件的元素 --- 示例: 返回带有类名 "intro" 的所有 <p> 元素:$("p").filter(".intro")
(2) 创建节点
$(selector) ---- 获取节点
$(DOM) --- 创建节点 --- 示例:$('<div></div>')
(3) 元素内部插入子节点
$(this).append(content) ---示例:$('div').append('<p></p>') --- p元素添加到div元素下
$(this).appendTo(content) ---示例:$('div').appendTo('<p></p>') --- div元素添加到p元素下
$(this).prepend(content) --- 示例:$('div').prepend('<p></p>') --- p元素添加到div元素前
$(this).prependTo(content) --- 示例:$('div').prependTo('<p></p>') --- div元素添加到p元素前
(4) 元素外部插入兄弟节点
$(this).after(content) ---示例:$('div').after('<p></p>') --- p元素添加到div元素后面
$(this).insertAfter(content) ---示例:$('div').insertAfter('<p></p>') --- div元素添加到p元素后面
$(this).before(content) ---示例:$('div').before('<p></p>') --- p元素添加到div元素前面
$(this).insertBefore(content) ---示例:$('div').insertBefore('<p></p>') --- div元素添加到p元素前面
(5) 删除节点
$(this).remove() ---移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除
$(this).empty() ---移除被选元素的所有子节点和内容
$(this).detach() -- 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。会保留所有绑定的事件、附加的数据,这一点与 remove() 不同
(6) 替换节点
$(this).replaceWith(content) ---示例:$('div').replaceWith('<p></p>') --- p元素替换div元素
$(content).replaceAll(this) ---示例:$('<p></p>').replaceAll('div') --- p元素替换div元素
(7) 复制节点
$(this).clone(params) --- params参数ture或flase, true复制事件处理,flase时只能复制节点不能复制事件处理
(8) 属性操作
$(this).attr('width') ---获取属性值
$(this).attr({width:"200",height:"80"}) ---设置多个属性的值
$(this).removeAttr('width') --- 删除元素属性