属性的移出与添加

代码如下：

  <div id="div1">

        <ul id="ul1">

            <li>li1_1</li>

            <li οnclick="changeColor(this)">li1_2</li>

            <li>li1_3</li>

            <li>li1_4</li>

            <li >li1_5</li>

        </ul>

        <p>

            这是<b>重点内容</b>

            <h3>标题3</h3>

            <h4>标题4</h4>

            <h5>标题5</h5>

            <b>重点内容</b>

        </p>

    </div>

    <div id="div2"></div>

   

    <script src="~/Content/jquery-1.12.4/jquery-1.12.4.js"></script>

    <script>

//题1：移除#ul1下面的第二个li标签的onclick属性

$("#ul1 li:eq(1)").removeAttr("onclick");

讲解：:eq（）它是一个选择器匹配一个给定索引值的元素

removeAttr（）属性从每一个匹配的元素中删除一个属性

 

//题2：为#ul1下面的最后一个li标签添加自定义属性src,值为https://www.baidu.com/

 

//$("#ul1 li:last-child").attr("data-src", "https://www.baidu.com/");

$("#ul1 li:last-child").data("src", "https://www.baidu.com/");

讲解：选择最后一个标签的方法有很多种：

p:last-of-type  p:nth-last-child(2)  p:nth-last-of-type(2)  p:last-child

Attr()为一个回调行数

data：在元素上存放或读取数据,返回jQuery对象。当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值，值得注意的是，如果浏览器支持HTML5，同样可以读取该DOM中使用 data-[key] = [value] 所存储的值。参见最后一个示例。

//题3：获取题2设置的自定义属性，使用data()方法

 

$("#ul1 li:last-child").data("src");

console.log($("#ul1 li:last-child").data("src"))

//题4：使用遍历的方法，找到#div1的后代元素b，并设置样式

 

//$("#div1 b").css("color", "red");

 

//$("#div1 b").each(function (i) {

//    //console.log(i);

//    //console.log(this);

//    $(this).css("color", "red");

//})

讲解：each()方法规定为每个匹配元素规定运行的函数

//题5：找到h5标签的前一个兄弟元素，并绑定点击事件输出匹配元素的文本内容

$("h5").prev().click(function () {

console.log($(this).text());

//$(this).text();

})

讲解： prev取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

//题6：选择页面上的b标签，绑定点击事件实现切换类（.liS）的效果

 

$("b").click(function () {

$(this).toggleClass("liS");

})

讲解：选择b标签绑定click ，this表示当前的 toggleClass()方法如果存在（不存在）就删除（添加）一个类。

//题7：删除#div1中的b标签，保留题6绑定的点击事件，将删除的b标签插入到#div2中

 

//var b = $("#div1 b").remove();

var b = $("#div1 b").detach();

console.log(b);

$("#div2").append(b);

讲解：remove（）这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

detach（）这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

//题8：为h3标签绑定hover事件，设置鼠标移入字体为红色，鼠标移出字体为绿色、

$("h3").hover(function () {

$(this).css("color", "red");

}, function () {

$(this).css("color", "green");

});

讲解：hover一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。over:鼠标移到元素上要触发的函数out:鼠标移出元素要触发的函数

//题9：点击#ul1里面的li标签字体颜色变成红色，动态插入3个新的li标签可以实现同样的点击效果

for (var i = 0; i < 3; i++) {

$("#ul1").append('<li>新的li标签</li>');

}

$("#ul1 li").click(function () {

$(this).css("color", "red");

});

讲解：利用for循环中执行的append()方法动态添加<li>新的li标签</li>

获取到标签绑click定点击事件在函数中执行css（）方法添加元素

 

//题10：获取h4标签内部区域（内容+padding）的高度以及宽度

 

//var w = $("h4").width();//获取到内容部分的宽度

//var h = $("h4").height();//获取到内容部分的高度

var w = $("h4").innerWidth();//获取内容+padding部分的宽度

var h = $("h4").innerHeight();//获取内容+padding部分的高度

//内容+内边距+边框

$("h4").outerWidth();

$("h4").outerHeight();

console.log(w);

console.log(h);

讲解：以上两种方法的不同之处在于一个获取到了边框另一个没有获取到

 

</script>