jQuery-属性相关操作

jQuery内容选择器

• :empty
  找到既没有文本内容也没有子元素的指定元素，返回集合元素

<script>
    $(function () {
      // 找到既没有文本内容也没有子元素的div
      var $div = $("div:empty");
      console.log($div);
     });
</script>

• :parent
  找到有文本内容或有子元素的指定元素，返回集合元素

<script>
    $(function () {
      // 找到既有文本内容或有子元素的div
      var $div = $("div:parent");
      console.log($div);
     });
</script>

• :contains(text)
  找到包含指定文本内容的指定元素，返回集合元素

<script>
    $(function () {
      // 找到包含我是div的div
      var $div = $("div:contains('我是div')");
      console.log($div);
     });
</script>

• :has(selector)
  找到包含指定子元素的指定元素，返回集合元素

<script>
    $(function () {
      // 找到包含p标签的div
      var $div = $("div:has('p')");
      console.log($div);
     });
</script>

jQuery选择器

• id选择器
  根据给定的id匹配一个元素，返回单个元素

<script>
    $(function () {
      // 找到id为box的元素
      var $box = $("#box");
      console.log($box);
     });
</script>

• 类选择器
  根据给定的类名匹配元素，返回找到的元素集合

<script>
    $(function () {
      // 找到所有类名box的元素
      var $box = $(".box");
      console.log($box);
     });
</script>

• 元素选择器
  根据给定的元素名称匹配元素，返回找到的元素集合

<script>
    $(function () {
      // 找到所有<p>元素
      var $ps = $("p");
      console.log($ps);
     });
</script>

• 通配符选择器
  匹配所有元素，返回找到的元素集合

<script>
    $(function () {
      var $eles = $("*");
      console.log($eles);
     });
</script>

• 并集选择器
  将所有选择器匹配到的元素合并后一起返回，返回找到的元素集合

<script>
    $(function () {
      // 选取所有<div>元素,所有<span>元素和所有类名为box元素
      var $eles = $("div,span,.box");
      console.log($eles);
     });
</script>

• 后代选择器
  选取指定元素的所有后代元素(包括孙子/重孙子等)，返回找到的元素集合

<script>
    $(function () {
      // 选取<div>元素里所有的<span>元素
      var $eles = $("div span");
      console.log($eles);
     });
</script>

• 子元素选择器
  找到指定元素的所有直接子元素，返回找到的元素集合

<script>
    $(function () {
      // 选取<div>元素下元素名称是<span>的直接子元素
      var $eles = $("div>span");
      console.log($eles);
     });
</script>

• 相邻兄弟选择器
  选取某个元素后面所有紧跟的那个元素，没有级别之分，返回找到的元素集合

<script>
    $(function () {
      // 选取类名为box后面所有<div>元素
      var $eles = $(".box+div");
      console.log($eles);
     });
</script>

• 通用兄弟选择器
  匹配某个元素之后的所有指定的同级元素，返回找到的元素集合

<script>
    $(function () {
      // 选取类名为box元素后面与其同级的div元素
      var $eles = $(".box~div");
      console.log($eles);
     });
</script>

• 更多选择器请查看jQuery文档 http://jquery.cuishifeng.cn/

属性和属性节点

• 属性
  • 属性就是对象身上的变量
  • 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)
• 属性节点
  • 在编写HTML代码时,在HTML标签中添加的属性就是属性节点
• 操作属性与属性节点

// 添加或修改属
对象.属性名称 = 值;
对象["属性名称"] = 值;
// 获取属性
对象.属性名称
对象["属性名称"]
// 获取属性节
DOM对象.getAttribute("属性节点名称")
// 设置属性节点
DOM对象.setAttribute("属性节点名称", "值");

• 属性和属性节点有什么区别
  任何对象都有属性, 但是只有DOM对象才有属性节点

jQuery中的attr和prop方法

• attr(name|pro|key,val|fn)
  • 获取或者设置属性节点的值
  • 可以传递一个参数, 也可以传递两个参数
  • 如果传递一个参数, 代表获取属性节点的值
  • 如果传递两个参数, 代表设置属性节点的值
  • 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
  • 如果是设置:找到多少个元素就会设置多少个元素
  • 如果是设置:如果设置的属性节点不存在, 那么系统会自动新增

<script>
    $(function () {
        // 获取标签为span的class属性节点的值 
        console.log($("span").attr("class"));
        // 设置标签为span的class属性节点的值为box
        $("span").attr("class", "box");
        // 增加一个属性节点abc，取值为123
        $("span").attr("abc", "123");
     });
</script>

• removeAttr(name)
  • 用于删除指定属性节点
  • 会删除所有找到元素指定的属性节点

<script>
    $(function () {
        // 删除所有span标签的class和name属性节点
        $("span").removeAttr("class name");
     });
</script>

• prop(n|p|k,v|f)
  • 用于设置或者获取元素的属性值
  • 设置属性时,会设置所有找到元素的属性
  • 获取属性时,只会获取找到第一个元素的属性

<script>
    $(function () {
        // 设置找到的第一个span标签的demo属性节点
        $("span").eq(0).prop("demo", "it666");
        // 获取找到的第一个span标签的demo属性节点
        $("span").eq(0).prop("demo");
     });
</script>

• removeProp(name)
  • 用于删除指定属性节点
  • 会删除所有的找到的元素属性

<script>
    $(function () {
        // 删除所有span标签的demo属性节点
        $("span").removeProp("demo");
     });
</script>

• attr方法和prop方法区别
  • attr和prop即可以操作属性也可以操作属性节点
  • 官方推荐在操作属性节点时,具有true和false两个属性的属性节点，如checked, selected 或者disabled 使用prop()，其他的使用attr()
  • 因为如果具有true和false两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

jQuery类操作相关方法

• addClass(class|fn)
  • 给元素添加一个或多个类
  • 如果要添加多个, 多个类名之间用空格隔开即可

<script>
    $(function () {
         // 给div添加class1 和 class2两个类
         $("div").addClass("class1 class2");
     });
</script>

• removeClass([class|fn])
  • 删除一个类
  • 如果想删除多个, 多个类名之间用空格隔开即可

<script>
    $(function () {
         // 删除div的class1
         $("div").removeClass("class1");
     });
</script>

• toggleClass(class|fn[,sw])
  • 切换类
  • 存在就删除不存在就添加

<script>
    $(function () {
         // 如果有class3就删除，不存在就天添加
         $("div").removeClass("class3");
     });
</script>

jQuery文本值相关的方法

• html([val|fn])
  • 添加或获取元素中的HTML，相当于JS中的innerHTML
• text([val|fn])
  • 添加或获取元素中的文本，相当于JS中的innerText
  • text方法能做的html方法都能做,所以一般使用html方法
• val([val|fn|arr])
  • 添加或获取元素value属性的值

<script>
    $(function () {
        $(".box1").html("<p>我是段落<span>我是span</span></p>");
        $(".box2").text("<p>我是段落<span>我是span</span></p>");
        console.log($("input").val());;
     });
</script>