本文主要是介绍小汤学编程之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值
这篇关于小汤学编程之jQuery学习day02——文档操作、属性、CSS的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
