文章目录

  • 一、jQuery获取、设置HTML标签的内容和属性
  • 获得内容 - text()、html() 以及 val()
  • 获取属性 - attr()，prop()
  • 二、增删 HTML 的内容
  • 增加
  • 删除
  • 三、操作CSS
  • addClass 添加
  • removeClass 删除
  • toggleClass 切换
  • css 获取与设置
  • 所有操作html、css方法参考 ☆
  • 四、操作元素和浏览器窗口的尺寸
  • 五、遍历DOM元素
  • 父辈查找
  • 同辈查找
  • 后代查找
  • 过滤查找
  • 所有遍历方法参考 ☆


一、jQuery获取、设置HTML标签的内容和属性

tips：括号内无参则是获取，有参则是设置

获得内容 - text()、html() 以及 val()
  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
testValue = $("#test").val();	// 获取
$("#test").val("newValue");	// 设置
$("#test2").html("<b>Hello world!</b>");	// 设置html

回调函数：回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回你希望使用的字符串。

$("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });


获取属性 - attr()，prop()
url = $("#runoob").attr("href")	// 获取href属性（得到地址）
$("#runoob").attr("href","www.baidu.com")	// 设置值
$("#runoob").attr({"href":"www.baidu.com","title":"newTitle"})	// 同时设置多个属性

回调函数：有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回你希望使用的字符串。

$("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });

tips：attr与prop
prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

二、增删 HTML 的内容

增加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

tips：
append/prepend 是在选择元素内部嵌入。
after/before 是在元素外面追加。

JS实例：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
    $("img").after([txt1,txt2,txt3]);        // 参数也可以是list
}
删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

可选参数：选择器

$("#div1").remove();	
$("#div1").empty();
$("p").remove(".italic");	// 删除 class="italic" 的所有 <p> 元素

三、操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass 添加
$("button").click(function(){
  $("div").addClass("important");	// 添加一个类
  $("h1,h2,p").addClass("blue");	// 给多个标签添加一个类
  $("body div:first").addClass("important blue"); // 给标签添加多个类
});
removeClass 删除
// 删除多个标签二的blue类
$("h1,h2,p").removeClass("blue");
toggleClass 切换
// 添加、删除类的切换-若有则删除，没有则添加
 $("h1,h2,p").toggleClass("blue");
css 获取与设置

css() 方法设置或返回被选元素的一个或多个样式属性。

获取：

var backgroundColor = $("p").css("background-color");

设置：

$("p").css("background-color","yellow");
// 设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});
所有操作html、css方法参考 ☆

菜鸟教程 - jQuery HTML / CSS 方法

四、操作元素和浏览器窗口的尺寸

html jquery 应用 jquery.html()_html

width()			—— 设置或返回元素的宽度（不包括内边距、边框或外边距）
height()		—— 设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth()	—— 返回元素的宽度（包括内边距）
innerHeight()	—— 返回元素的高度（包括内边距）

outerWidth()	—— 返回元素的宽度（包括内边距和边框）
outerHeight()	—— 返回元素的高度（包括内边距和边框）
$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);


  txt+="div 宽度，包含内边距: " + $("#div2").innerWidth() + "</br>";
  txt+="div 高度，包含内边距: " + $("#div2").innerHeight();
  $("#div2").html(txt);

  txt+="div 宽度，包含内边距和边框: " + $("#div3").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div3").outerHeight();
  $("#div3").html(txt);
});

tips：width() 获取的是 css 设置的 width 减去 padding 和 border 的



五、遍历DOM元素

三级关系：
父辈：父、祖父、曾祖父等等
同辈：同胞（拥有相同的父）
后代：子、孙、曾孙等等。

父辈查找

parent() —— 返回被选元素的直接父元素，只会向上一级对 DOM 树进行遍历
parents() —— 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
parentsUntil() —— 返回介于两个给定元素之间的所有祖先元素

$(document).ready(function(){
  // 返回每个 <span> 元素的直接父元素
  var spanParent = $("span").parent();
  spanParent.css("color","red");	// 将每个 <span> 元素的直接父元素颜色设置为红色
  // 返回所有 <span> 元素的所有祖先
  $("span").parents();
  // 所有 <span> 元素的所有祖先，并且它是 <ul> 元素
  $("span").parents("ul");
  // 返回介于 <span> 与 <div> 元素之间的所有祖先元素
  $("span").parentsUntil("div");
});
同辈查找

siblings() —— 返回被选元素的所有同胞元素
next() —— 返回被选元素的下一个同胞元素，该方法只返回一个元素
nextAll() —— 返回被选元素的所有跟随的同胞元素
nextUntil() —— 返回介于两个给定参数之间的所有跟随的同胞元素
prev() —— 同上，只不过是向上级遍历
prevAll()
prevUntil()

$(document).ready(function(){
  // 返回 <h2> 的所有同胞元素
  $("h2").siblings();
  // 返回属于 <h2> 的同胞元素的所有 <p> 元素
  $("h2").siblings("p");
  // 返回 <h2> 的下一个同胞元素
  $("h2").next();
  // 返回 <h2> 的所有跟随的同胞元素
  $("h2").nextAll();
  // 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
  $("h2").nextUntil("h6");
});
后代查找

children() —— 返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历
find() —— 返回被选元素的后代元素，一路向下直到最后一个后代

$(document).ready(function(){
  // 返回每个 <div> 元素的所有直接子元素
  $("div").children();
  // 返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
  $("div").children("p.1");
  // 返回属于 <div> 后代的所有 <span> 元素
  $("div").find("span");
  // 返回 <div> 的所有后代
  $("div").find("*");
});
过滤查找

first() —— 返回被选元素的首个元素
last() —— 返回被选元素的最后一个元素
eq() —— 返回被选元素中带有指定索引号的元素，索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

$(document).ready(function(){
  // 选取首个 <div> 元素内部的第一个 <p> 元素
  $("div p").first();
  // 选择最后一个 <div> 元素中的最后一个 <p> 元素
  $("div p").last();
  // 选取第二个 <p> 元素（索引号 1）
  $("p").eq(1);
});

filter() —— 允许你规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() —— 返回不匹配标准的所有元素，not() 方法与 filter() 相反

$(document).ready(function(){
  // 返回带有类名 "url" 的所有 <p> 元素
  $("p").filter(".url");
  // 返回不带有类名 "url" 的所有 <p> 元素
  $("p").not(".url");
});

tips：
$(“p”).last().css(“background-color”,“yellow”);
和
$(“p:last”).css(“background-color”,“yellow”);
效果一样。

$(“p”).first().css(“background-color”,“yellow”);
和
$(“p:first”).ss(“background-color”,“yellow”);
效果一样。

$(“p”).not(".url");
和
$(“p:not(.url)”);
效果一样。