jQuery文档操作

jQuery文档操作

文档操作

parent()

• $("#d1").parent() – 获取id为d1元素的父元素

parents()

• $("#d1").parents() – 获取id为d1元素的祖先元素
• $("#d1").parents(“tr”) – 获取id为d1元素的tr祖先元素

next()

• $(“div”).next() – 获取所匹配元素后面紧邻的兄弟元素
• $(“div”).next(“span”) – 获取所匹配元素后面紧邻的span兄弟元素

nextAll()

• $(“div”).nextAll() – 获取所匹配元素后面所有的兄弟元素
• $(“div”).nextAll(“span”) – 获取所匹配元素后面所有的span兄弟元素

prev()

• $(“div”).prev() – 获取所匹配元素前面紧邻的兄弟元素
• $(“div”).prev(“span”) – 获取所匹配元素前面紧邻的span兄弟元素

prevAll()

• $(“div”).prevAll() – 获取所匹配元素前面所有的兄弟元素
• $(“div”).prevAll(“span”) – 获取所匹配元素前面所有的span兄弟元素

siblings()

• $(“div”).siblings() – 获取所匹配元素前后所有的兄弟元素
• $(“div”).siblings(“span”) – 获取所匹配元素前后所有的span兄弟元素

append()

• $(“div”).append("") –为所匹配元素追加一个span子元素

remove()

• $(“div”).remove() – 删除所匹配元素

html()

• $(“div”).html() – 获取所匹配元素的html内容
• $(“div”).html(“xxx”) – 为所匹配元素设置html内容

text()

• $(“div”).text() – 获取所匹配元素的文本内容
• $(“div”).text(“xxx”) – 为所匹配元素设置文本内容

attr()

• $(“div”).attr(“id”) – 获取所匹配元素的id属性值
• $(“div”).attr(“id”, “xx”) – 为所匹配元素设置id属性

css

• $(“div”).css(“width”) – 获取所匹配元素的width样式属性值
• $(“div”).css(“width”, “200px”) – 为所匹配元素设置width样式属性
• $(“div”).css({“width”:“200px”, “color”:“red”,“font-size”:“24px” }) ;
  – 为所匹配元素设置width样式属性

事件

click()

• $(“div”).click(function(){}) – 为所匹配元素绑定点击事件

blur()

• $(“input”).blur(function(){}) – 为所匹配元素绑定失去输入焦点事件

focus()

• $(“input”).focus(function(){}) – 为所匹配元素绑定获得输入焦点事件

change()

• $(“select”).change(function(){}) – 为所匹配元素绑定选项切换事件

ready()

• $(document).ready(function(){}) – 文档就绪事件
  其作用相当于: window.onload = function(){}
  简写形式为:
• $(function(){}) – 在整个文档加载完成后立即执行

效果

show()

• $(“div”).show() – 将隐藏元素设置为显示(底层操作的是display);

hide()

• $(“div”).hide() – 将显示元素设置为隐藏(底层操作的是display);

toggle()

• $(“div”).toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.