jQuery 引入，语法，事件冒泡，自定义事件。HTML捕获、设置、元素添加、删除

1、引入jQuery

1):下载jQuery库

2）：从CDN中载入jQuery，

http://libs.baidu.com/jquery/1.11.1/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/jquery.mi.js

2、jQuery语法：

基础语法： $(selecter).action()

选择器：元素名、类名、id……全部选择器查找jquery官方文档https://api.jquery.com/category/selectors/

$("p")

$("p.class")

$("p#id")

当事件较多，文档较大时频繁使用单个事件会很占内存，这时可以使用bind()事件。

$("#button").bind("click",clickhandler1);
$("#button").bind("click",clickhandler2);
function clickhandler1(){
   console.log("clickhandler1");
}
function clickhandler2(){
   console.log("clickhandler2");
}
解除绑定：
$("#button").unbind("click");//两个都被解除
$("#button").unbind("click",clickhandler1);//直解除clickhandler1

在jQuery1.7之后可以使用on代替bind，使用off代替unbind。

$("#button").on("click",clickhandler1);
$("#button").on("click",clickhandler2);
$("#button").bind("click",clickhandler1);
$("#button").off("click");

3.事件冒泡

$("body").bind("click",clickbody);
$("div").bind("click",clickdiv);
function clickbody(){
    consol.log("body");
}
function clickdiv(){
    consol.log("div");
}
浏览器输出为
div //currenttarget=div target=div
body//currenttarget=body target=div

阻止事件冒泡：

event.stopPropagation();//阻止父级事件冒泡

event.stopImmediatePropagation();//阻止全部事件冒泡

4、自定义事件

$(document).ready(fucntion(){
    $("#btn").click(function(){
        var e=jQuery.Event("MyEvent");
        $("#btn").trigger(e);
    }) 
    $("#btn").bind("MyEvent",function(event){
        console.log(event);
    })
});

5、jQuery HTML捕获、设置、元素添加、元素删除

1）HTML获取、设置

text() ：设置或返回所选元素的文本内容，如果传入参数则为要设置的内容。
html() ：设置或返回所选元素的内容（包括 HTML 标记），如果传入参数则为要设置的内容。
val() ：设置或返回表单字段的值，如果传入参数则为要设置的内容。
attr("属性名")：返回给定属性值，如果传入第二个参数，则设置改属性的值。

如果要修改多个属性名，则要使用花括号，如下修改a元素的href,title和id属性

$("a").attr({
              "href":"http://www.baiduu.com",
               "title":"hello",
               "id":"link"
     })

使用回调函数修改p的内容
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
       $(document).ready(function()        
          $("#btn1").click(function(){
      	    $("#p1").text(function(i,ot){
    		  return "old:"+ot+"  new:新内容"+(i);
    	    });
          });
        });
   </script>
</head>
<body>
  <p id="p1">hello world</p>
  <button id="btn1">回调</button>
</body>
</html>

2)HTMl给指定元素添加内容

$("p").append();在p元素的子元素之后插入内容，参数为要插入的内容

$("p").prepend();在p元素的子元素之前插入内容，参数为要插入的内容

$("p").before();在p元素的子元素之前插入内容，并换行，参数为要插入的内容

$("p").after();在p元素的子元素之后插入内容，并换行，参数为要插入的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
	<p id="p1">hello world</p>
	<p id="p2">hello world</p><br>
	<button id="btn1">p1添加内容</button>
	<button id="btn2">p2添加内容</button>
    <script type="text/javascript">
	$(document).ready(function() {
	    $("#btn1").click(function(){
    		$("#p1").append(" append");
    		$("#p1").prepend("prepend ");
		});
		 $("#btn2").click(function(){
    		$("#p2").after(" after");
    		$("#p2").before("before ");
		});
	});
</script>
</body>
</html>

点击btn1和btn2后页面变为

3）添加元素：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	
	
</head>
<body>
	<button id="btn1">添加元素</button>
	
    <script type="text/javascript">
	$(document).ready(function() {
	    $("#btn1").click(function(){
    		var text1="<p>hello</p>";
    		var text2=$("<p></p>").text("hello");
    		var text3=document.createElement("p");
    		text3.innerHTML="hello";
    		$("body").append(text1,text2,text3);
    	});		 
	});
</script>
</body>
</html>

4）删除元素：

remove();移除整个元素

empty();只移除元素的内容

jQuery 引入，语法，事件冒泡，自定义事件。HTML捕获、设置、元素添加、删除

猜你喜欢