JQuery笔记 - JQuery HTML

JQuery HTML

目录

• JQuery HTML
  • 1. 获取与设置DOM
    • 1.1 回调函数
  • 2. 添加与删除DOM
    • 2.1 append与after（prepend和before）的区别
    • 2.2 重复添加元素
  • 3. CSS类
    • 3.1 添加、删除和切换样式
    • 3.2 css()

1. 获取与设置DOM

• text() - 设置或返回所选元素的文本内容

  //获取指定元素的文本内容
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  
  //设置指定元素的文本内容
  $("#btn2").click(function(){
    $("#test1").text("Hello world!");
  });
  

• html() - 设置或返回所选元素的内容（包括 HTML 标记）

  //获取指定元素的html内容
  $("#btn1").click(function(){
    alert("HTML: " + $("#test").html());
  });
  
  //设置指定元素的html内容
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  

• val() - 设置或返回表单字段的值

  //获取指定表单字段的值
  $("#btn1").click(function(){
    alert("Value: " + $("#test").val());
  });
  
  //设置指定表单字段的值
  $("#btn2").click(function(){
    $("#test3").val("Dolly Duck");
  });
  

• attr() - 获取或添加属性值

  //获取指定元素的属性值
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
  
  //添加or覆盖指定元素的属性值
  $("button").click(function(){
    $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
  });
  
  //同时添加or覆盖多个指定元素的属性值
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "http://www.w3school.com.cn/jquery",
      "title" : "W3School jQuery Tutorial"
    });
  });
  

• removeAttr() - 删除属性值

  $("button").click(function(){
    $("#w3s").removeAttr("href");
  });
  

• 注意：

  • 即便是html也无法获取完整的标签段落，如有这中需要可以直接使用选择器获取（$(#id)、$(.class)...）
  • attr在添加属性时，若该属性已存在，则为覆盖操作；若该属性未存在，则为添加操作

1.1 回调函数

• html()、text()、val()、attr()都有回调函数。

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

• 例：

  <p class="test1">这是<b>粗体0</b>文本。</p>
  <p class="test1">这是<b>粗体1</b>文本。</p>
  <p class="test1">这是<b>粗体2</b>文本。</p>
  <button id="btn1">显示旧/新文本</button>
  
  <script>
  	$(document).ready(function(){
  		$("#btn1").click(function(){
  			$(".test1").text(function(index,origText){
  		      return "Old text: " + origText + " New text: Hello world! (index: " + index + ")"; 
  			});
  		});
  	});
  </script>
  
  <!--输出结果-->
  Old text: 这是粗体0文本。 New text: Hello world! (index: 0)
  Old text: 这是粗体1文本。 New text: Hello world! (index: 1)
  Old text: 这是粗体2文本。 New text: Hello world! (index: 2)
  

• 由例可知，origText表示旧字符串，return的字符串会取代原字符串。index表示当前操作的元素在选择器获取元素列表中的位置，比如此处选择器$(".test1")获取了3个class为test1的元素，那么当操作第一个数组的时候，它的索引(index)就是0

• 注意：并不是所有选择器都会产生数组，比如id选择器就只会获取最近的符合参数的元素，其长度始终为1

2. 添加与删除DOM

• append() - 在被选元素的结尾插入内容

  $("p").append("Some appended text.");
  

• prepend() - 在被选元素的开头插入内容

  $("p").prepend("Some prepended text.");
  

• after() - 在被选元素之后插入内容

  $("img").after("Some text after");
  

• before() - 在被选元素之前插入内容

  $("img").before("Some text before");
  

• remove() - 删除被选元素及其子元素

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

• empty() - 删除被选元素的子元素

  $("#div1").empty();
  

2.1 append与after（prepend和before）的区别

• append() 和 prepend() 是在被选中元素的结尾/开头添加元素，也就是说，添加的元素不会超出被选中元素标签的范围

• after() 和 before() 是在被选中元素的后面/前面添加元素，即添加的元素会出现在被选中元素标签的外侧

  <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <!--append的元素在这里-->
  </ol>
  <!--after的元素在这里-->
  

2.2 重复添加元素

• 四种方法都可以多次重复添加元素，使用这个特性也可以做到动态添加元素

  function appendText()
  {
  	var txt1 = "<p>Text.</p>";               // 以 HTML 创建新元素
  	var txt2 = $("<p></p>").text("Text.");   // 以 jQuery 创建新元素
  	var txt3 = document.createElement("p");  // 以 DOM 创建新元素
  	txt3.innerHTML = "Text.";
  	$("p").append(txt1,txt2,txt3);         // 追加新元素
  }
  

3. CSS类

3.1 添加、删除和切换样式

• 前言 - 例子中所使用的样式如下

  .important {
  	font-weight:bold;
  	font-size:xx-large;
  }
  
  .blue {
  	color:blue;
  }
  

• addClass() - 向被选元素添加一个或多个类

  //给所有p段落添加blue样式
  $("button").click(function(){
    $("p").addClass("blue");
  });
  
  //给所有 id = "div1" 添加blue和important样式
  $("button").click(function(){
    $("#div1").addClass("important blue");
  });
  

• removeClass() - 从被选元素删除一个或多个类

  $("button").click(function(){
    $("p").removeClass("blue");
  });
  

• toggleClass() - 对被选元素进行添加/删除类的切换操作

  使用toggle就不用同时设置addClass和removeClass两个按钮来实现样式的开关了

  $("button").click(function(){
    $("p").toggleClass("blue");
  });
  

• 注意：添加的样式必须提前设置好，不能添加字面量

3.2 css()

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

• 获取

  $("p").css("background-color");
  

• 设置

  //设置单个属性
  $("p").css("background-color","yellow");
  //设置多个属性
  $("p").css({"background-color":"yellow","font-size":"200%"});