jQuery HTML

JQuery 捕获

jQuery - 设置内容和属性

获得内容和设置内容 - text()、html() 以及 val()

• text()：设置或返回所选元素的文本内容。
• html()：设置或返回所选元素的内容（包括 HTML 标记）。
• val()：置或返回表单字段的值。

//无回调函数
$(function() {
	  	$("#btn1").click(function() {
	  		$("#test").text("hello word");
	  	});
	  	$("#btn2").click(function() {
	  		$("#test2").html("<b>hello word</b>")
	  	});
	  	$("#btn3").click(function() {
	  		$("#test3").val("Hello jquery")
	  	});
	 
//有回调函数
$("#btn").click(function() {
      		$("#text1").text(function(i,old) {
      			return "文本:"+old+"Hello (index:"+i+")";
      		});
      	});
      	$("#btn2").click(function() {
      		$("#text2").html(function(i,old) {
      			return "html:"+old+"html (index:"+i+")";
      		})
      	});
     })

获取属性 - attr()
jQuery attr() 方法用于获取属性值。

$("#btn4").click(function() {
	  		alert("网址为："+$("#runoob").attr("href"));
	  	})
//设置单个属性
$("#btn4").click(function() {
     $("#runoob").val("href","http://www.runoob.com/jquery");
})
//设置多个属性
$("#btn4").click(function() {
     $("#runoob").val({
     "href","http://www.runoob.com/jquery",
     "title","菜鸟教程"
     });
     // 通过修改的 title 值来修改链接名称
	title =  $("#runoob").attr('title');
	$("#runoob").html(title);
})

HTML代码

  <p><a href="https://how2j.cn/k/jquery/jquery-event/473.html" id="runoob"></a></p>
	<button id="btn4">显示网址</button>

添加元素

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

$(function() {
	  	$("#btn1").click(function() {
	  	//在被选元素后面添加内容
	  		$("p").append("hello word");
	  	//在被选元素前面添加内容
	  		$("p").prepend("你好")
	  	});
	  	//在图片之前插入内容
	 $("#btn1").click(function(){
       $("img").before("<b>之前</b>");
  });
//在图片之后插入内容
  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
	  })

删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

语法:

$("#btn").click(function() {
//remove()方法是删除整个div,还接受一个参数，允许对被删元素进行过滤
	  		$("div").remove();
	  		//$("p").remove(".test");
	  	})
//只是清空div里面的内容，不删除div
	  	$("#btn2").click(function() {
	  		$("div").empty();
	  	})

获取并设置 CSS 类

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

//在添加类时，也可以选取多个元素，在addClass()方法中也可以规定多个类
$("#btn").click(function() {
	  		$("h1,h2,p").addClass("blue");
	  		$("body div:first").addClass("important blue");
	  	})

//removeClass()方法可以在不同的元素删除指定的class属性
$("#btn2").click(function() {
	  		$("p").removeClass("important");
	  	})
	  	
//toggleClass()方法可以对被选元素进行添加和删除类的切换操作
$("#btn3").click(function() {
	  		$("h1,h2,p").toggleClass("blue");
	  	})

css() 方法

使用css()方法依次输出背景颜色的二进制

//利用一个循坏依次输出背影颜色，不用一个个去数要的元素是 body 的第几个元素
$("button").click(function() {
	  for(var i = 0; i < $("p").length; i++)
        {
            alert("背景颜色=" + $("p").eq(i).css("background-color"));
        }
	 	 })
//css()方法也能同时设置多个属性
$("p").css({"background-color":"yellow","font-size":"200%"});