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

最新推荐文章于 2024-08-17 15:56:45 发布

willard_cui

最新推荐文章于 2024-08-17 15:56:45 发布

阅读量396

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 前端

本文链接：https://blog.youkuaiyun.com/willard_cui/article/details/81266521

前端同时被 2 个专栏收录

43 篇文章

订阅专栏

jQuery

18 篇文章

订阅专栏

本文介绍如何使用jQuery简化HTML文档遍历、事件处理、动画等操作。覆盖了jQuery的选择器、事件绑定与解绑、自定义事件、HTML操作等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/

jQuery选择器
$("p")		$("p:hidden")	所有隐藏的p元素
$("p.class")		$("p:visible")	所有可见的p元素
$("p#id")		$("[href]")	所有带href属性的元素
$("p:first")	第一个p元素	$("[href="#]")	所有href=“#”的元素
$("p:last")	最后一个p元素	$(":input")	所有input元素
$("tr:even")	所有偶数<tr>元素	$(":text")	所有type=text的input元素
$("tr:odd")	所有奇数tr元素	$(":button")	所有type=button的input元素
$("ul li:eq(3)")	列表中第四个li元素	$(":radio")	所有type=radio的input元素
$("ul li:gt(3)")	列表中index>3元素	$(":checkbox")	所有type=checkbox的input元素
$("ul li:lt(3)")	列表中index<3元素	$(":enable")	所有激活的input元素
$("input:not(:empty)")	所有不为空的input元素	$(":dicable")	所有禁用的input元素
$(":header")	所有标题元素	$(":selected")	所有被选取的input元素
$(":animated")	所有动画元素	$(":checked")	所有被选中的input元素

当事件较多，文档较大时频繁使用单个事件会很占内存，这时可以使用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();只移除元素的内容