jquery()-$()用法总结

最新推荐文章于 2023-02-03 01:40:48 发布

w狼子

最新推荐文章于 2023-02-03 01:40:48 发布

阅读量513

点赞数 1

分类专栏： jQuery 文章标签： jquery $()

本文链接：https://blog.csdn.net/wlk2064819994/article/details/81144387

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery()方法在大方向上有三种作用：
1.接受一个字符串（选择器），用于选取文档元素。
2.创建DOM元素。
3.绑定一个在DOM文档载入完成后执行的函数。

下面详细介绍各自的用法。

一、选取文档元素
1.1 $(selector,[context])
默认情况下，选择器从整个文档中对DOM进行搜索，不过当传入context参数时，就只会在context范围中选取元素。

例：

①：$("div span") //选取整个文档中在div元素中的span元素，这个用法想必所有人都会用

②：$("li","ul#wlk") //选取在指定context范围中的元素。
解释②：在id为"wlk"的ul中，选取li元素。context就是“ul#wlk”。

③：$("div.foo").click(function() {
  	$("span", this).addClass("bar");
   });
解释③：这个例子最主要就是认识到this就是参数context的值。在这个回调函数中，this指代的就是$("div.foo")选取的元素，
所以这段代码的意思就是：点击类名为foo的div元素时，为其中的span元素添加一个class属性bar。

1.2 将DOM对象转换成jquery对象
我们都知道，jquery对象才能调用jquery方法。所以我们必须把纯的DOM元素用jquery对象包装一下才能使用jquery方法。

例：

$("div").click(function(){
	$(this).addClass("bar");
})
//$(this)就是将div这个DOM元素包装成jquery对象，然后应用addClass方法。

var element = document.getElementById("wlk");
$(element);
//原生js获取到的DOM对象通过$()包装成jquery对象。

1.3 克隆jQuery对象
$(jQueryObject);
当以参数的形式向$()函数传递jQuery对象后，会创建一个该对象的副本。与初始对象一样，新的jQuery对象引用相同的DOM元素。

二、创建DOM元素
1.1 创建新的元素：jQuery(html)
参数html可以是自己手写的HTML字符串，或者是某些模板引擎或插件插件的字符串，也可以是ajax加载过来的字符串。同时，这些字符串可以包含斜杆或反斜杠。当创建单个元素时，请记得闭合标签。

例：

$("<p id='test' onclick='alert(1);'>这是p元素的文本内容</p>").appendTo("body");

1.2 创建新元素，并填充相关属性和事件:jQuery(html,props)
props是一个对象，该对象的属性可以是以下几种：
①.HTML属性，如id,title,class等。
②.jQuery的val, css, html, text, data, width, height, or offset等方法。
③.绑定的事件名及处理函数。

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.test{
			color:blue;
		}
	</style>
</head>
<body>
	<div id="wlk"></div>
	<script src="jquery-3.2.1.min.js"></script>
	<script>
		$("<div></div>", {
		  class: "test",
		  text: "点我",
		  id:"hhh",
		  title:"wwwwwwwwwww",
		  click: function(){
		    alert($(this).width());
		  },
		  css:{
		  	width:"100px",
	  		height:"100px",
	  		backgroundColor:"red"
		  }
		}).appendTo("#wlk");
	</script>
</body>
</html

解释一下上面的代码：
props对象中的class，id, title是HTML元素的属性。而text，css是jquery方法，因为HTML没有这种属性嘛。click是绑定的事件和处理函数。

三、绑定一个在DOM文档载入完成后执行的函数。
这种用法想必知道jQuery的人都会用。就是相当于原生js的window.οnlοad=function(){}的效果。
$(function(){})也就是$(document).ready(function(){})的简写形式。

这些都是我知道的，且感觉比较常用的用法。如果哪位看官有新发现，记得留言。

w狼子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
jquery()-$()用法总结

jQuery()方法在大方向上有三种作用：1.接受一个字符串（选择器），用于选取文档元素。2.创建DOM元素。3.绑定一个在DOM文档载入完成后执行的函数。下面详细介绍各自的用法。一、选取文档元素1.1 $(selector,[context])默认情况下，选择器从整个文档中对DOM进行搜索，不过当传入context参数时，就只会在context范围中选取元素。例：...
复制链接

扫一扫