小汤学编程之jQuery学习day02——文档操作、属性、CSS

一、文档操作

1.jQuery对象的遍历     2.内容操作     3.筛选     4.文档处理

二、属性

三、CSS

---

一、文档操作

1.jQuery对象的遍历

// index表示索引，element表示对应的dom对象
$("h1").each(function(index,element){
    if(index == 3){
        return true ;// 返回true表示跳过继续下次循环，返回false表示停止循环
    }
    console.log(index+"<-->"+element.innerText);
});

2.内容操作

代码	功能
$(“h1”).html();	获取第一个匹配元素的内容，包括html标签
$(“h1”).html("<p>hello</p>");	设置所有匹配元素的内容，包括html标签
$(“h1”).text();	获取所有匹配元素的文本内容，不包括html标签
$(“h1”).text(“Hello world!”);	设置所有匹配元素的文本内容，不包括html标签
$(“h1”).val();	获取第一个匹配元素的当前val值
$(“h1”).val(“Hello world!”);	设置所有匹配元素的当前val值

3.筛选

代码	功能
$(“h1”).eq(index);	返回满足条件的第二个对象，索引从0开始
$(“li”).first();	获取第一个元素
$(“li”).last();	获取匹配的最后一个元素
$(“h1”).hasClass(“hello”);	判断是否有class属性为hello的h1对象，返回布尔值
$(“h1”).is("#my_h1");	判断元素集合里是否至少有一个id为my_h1的h1元素，返回布尔值
$(“div”).children();	获取所有div的孩子集合
$(“div”).children(".hello");	获取所有class为hello的div的孩子集合
$(“div”).find(".hello");	获取所有class属性为hello的div的后代集合
$(“h1”).parent();	获取所有h1父元素
$(“h1”).parent("#my_div");	获取所有id值为my_div的父元素
$(“h1”).parents();	获取所有h1标签的祖宗元素，直到html元素
$(“h1”).parents("#my_div");	获取所有h1标签的id为my_div的祖宗元素
$(“h1”).siblings();	获取h1所有的同辈元素
$(“h1”).siblings(".hello");	获取h1所有class属性为hello的同辈元素

eq() 返回的是jQuery对象
参数为正数表示从头开始计算
参数为负数表示从后开始计算

4.文档处理

代码	功能
$("<h1>",{“id”:“my_h1”,“class”:“h1_class”});	创建一个h1标签，并设置id和class属性
$(“p”).append("<p>Hello</p>");	向每个匹配的元素内部追加内容
$("<p>Hello</p>").appendTo(“p”);	把内容追加到每个匹配的元素内部(appendTo用法同append，只是位置换了下，相当于汉语中的把字句转被字句。)
$(“p”).prepend("<p>Hello</p>");	向每个匹配的元素内部前置内容
$("<p>Hello</p>").prependTo(“p”);	把内容前置到每个匹配的元素(prependTo用法同prepend，也只是位置换了下。)
$(“p”).after("<p>Hello</p>");	在每个匹配的元素之后插入内容
$(“p”).before("<p>Hello</p>");	在每个匹配的元素之前插入内容
$(“p”).replaceWith("<p>Hello</p>");	把所有匹配的p元素替换成参数内容
$(“div”).empty();	把所有匹配元素的内容都清除
$(“h1”).remove(".hello");	把所有匹配的标签删除（参数可为空）
$(“h1”).clone();	克隆匹配的元素并选中克隆的副本

// 添加dom对象
var d1 = document.createElement("h1");
d1.innerText = "hello";
$("div").append(d1);

// 添加jquery对象
var $d2 = $('<h1>').text('hello');
$("#div").append($d2);

//添加的内容可以是html代码，也可以是dom对象，也可以是jQuery对象。

二、属性

代码	功能
$(“img”).attr(“src”);	获取匹配的第一个src属性，没有则返回undefined
$(“img”).removeAttr(“src”);	删除匹配的所有src属性
$(“img”).prop(“src”);	获取匹配的第一个src属性，若没有则返回空字符串
$(“div”).removeProp(“color”);	删除所有匹配的color属性
$(“img”).addClass(“img_class”);	为所有匹配的元素添加指定类名
$(“img”).removeClass(“img_class”);	将所有匹配的元素的全部（参数为空）或指定类删除
$(“img”).toggleClass(“img_class”);	如果存在则删除类，反之添加类

.attr()补充：
$(‘img’).attr(“src”,“img/1.png”);// 为所有匹配的元素设置一个属性
$(‘img’).attr( {“src”:“img/1.png”,“id”:“my_img”} );// 为所有匹配的元素设置一组属性

.prop()补充：
$(‘img’).prop(“src”,“img/1.png”);// 为所有匹配的元素设置一个属性
$(‘img’).prop( {“src”:“img/1.png”,“id”:“my_img”} );// 为所有匹配的元素设置一组属性

attr/removeAttr 与 prop/removeProp 的区别:

• 在获取radio跟checkbox的时候，attr返回的是checked跟undefined，而prop返回的是false跟true。
• removeProp在删除某些属性的时候无效，比如src、id、style。
• 是有true,false两个属性使用prop();（如’checked’,‘selected’,'disabled’等）
• 其他则使用attr()

三、CSS

代码	功能
$(“p”).css(“color”);	获取匹配的第一个元素的指定样式的值
$("#inner").position();	获取相对于选中元素最近的具有相对位置的父级元素的距离
$("#inner").offset();	获取相对于浏览器文档的距离
$(“p”).height();	获取匹配的第一个元素的高度，不含margin和padding（若给参数表示设置高度）
$(“p”).width();	获取匹配的第一个元素的宽度，不含margin和padding（若给参数表示设置宽度）
$(“h1”).innerHeight();	获取匹配的第一个元素的内部高度，不含内外边框
$(“h1”).innerWidth();	获取匹配的第一个元素的内部宽度，不含内外边框
$(“h1”).outerHeight();	获取匹配的第一个元素的内部高度，包含内外边框
$(“h1”).outerWidth();	获取匹配的第一个元素的内部宽度，包含内外边框

.css() 补充：
$(“p”).css(“color”,“red”);//将所有段落字体设为红色
$(‘h1’).css({“color”:“blue”,“font-size”:“30px”});// 设置一组CSS样式

.position() 和.offset() 补充：

• var vposition = $("#inner").position();
  console.log(vposition.left);// 不包含自身的margin值
• var voffset = $("#inner").offset();
  console.log(voffset.left); //包含自身的margin值