jQuery——选择器，操作DOM

jQuery是一个轻量级的js库

选择器

• 基本选择器
  
  • 元素选择器：$(“标签名”)
  • 类选择器：$(“.class”)
  • id选择器：$(“#id”)
  • 选择器组：$(“#d1,.importent”)

添加一个+按钮，使段落的字体放大

function plus() {
    $("#p1").css("font-size","150%");
    $("#img").width(function (n, c) {
        return c+10;
    })
}

<input type="button" value="+" onclick="plus();"/>
<p id="p1">
    利用jquery实现字体的放大
</p>
<img id="img" src="img/red.JPG">

• 层次选择器
  
  • 在select1元素下，选中所有满足select2的子孙元素：$(“select1 select2”)
  • 在select1元素下，选中所有满足select2的子元素：$(“select1>select2”)
  • 选中select1元素的，满足select2的下一个弟弟：$(“select1+select2”)
  • 选中select1元素的，满足select2的所有弟弟：$(“select1~select2”)
• 过滤选择器
  
  • 第一个元素 ——:first
  • 最后一个元素——:last
  • 把selector排除在外——:not(selector)
  • 下标等于index的元素——:eq(index)
  • 匹配包含给定文本的元素——:contains(text)
  • 匹配属性等于value的元素——:[atribute=value]
  • 匹配选中的checkbox——:checked
  • 匹配选中的option——:selected
• 表单选择器

操作DOM

• 读写节点
  
  • 读写HTML内容：obj.html()/obj.html("<p>123</p>")
  • 读写文本内容：obj.text()/obj.text(“123”)
  • 读写节点的value属性值：obj.val()/obj.val(“abc”)
  • 读写节点的属性值：obj.attr()/obj.val(“属性名”,”属性值”)
• 增删节点
  
  • 创建节点：$(“节点内容”)
  • 插入节点：parent.append(obj)作为最后一个子节点添加；brother.after(obj)作为下一个兄弟节点添加
  • 删除节点：obj.remove()
  • 清空节点：obj.empty()

样式操作

addClass(“”)：追加样式
removeClass(“”):移除指定样式
css(“”,”“):设置多个样式

DOM与jQuery

• jQuery转DOM

var $v =$("#v") ; //jQuery对象

var v1=$v[0]; //DOM对象

var v2=$v.get(0); //DOM对象

• DOM转jQuery

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象