jQuery获取值，页面加载事件，dom对象与jQuery对象之间的转换，jQuery选择器，注册事件

最新推荐文章于 2022-02-27 21:46:38 发布

qq_44845795

最新推荐文章于 2022-02-27 21:46:38 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/qq_44845795/article/details/103174388

版权

jQuery

##1.jQuery获取值

<body>
<div id = "myDiv">哈哈哈</div>
<script>
//原生JS
var my = document.getElementById("myDiv").innerHTML;
//jQuery
var my1 = $("#myDiv").html();
console.log(my);
console.log(my1);
</script>
</body>

##2.页面加载事件

<script>
			//第一种方式：window.onload页面加载完之后执行--所有img渲染完后
			window.onload = function() {
				var my = document.getElementById("myDiv").innerHTML;
				var my1 = $("#myDiv").html();
				console.log(my);
				console.log(my1);
			}

			//第二种方式：是第三种方式的简写
			$(function() {
				var my = document.getElementById("myDiv").innerHTML;
				var my1 = $("#myDiv").html();
				console.log(my);
				console.log(my1);
			});

			//第三种方式：
			$(document).ready(function() {
				var my = document.getElementById("myDiv").innerHTML;
				var my1 = $("#myDiv").html();
				console.log(my);
				console.log(my1);
			});
		</script>
	</head>
	<body>
		<div id="myDiv">哈哈哈</div>
	</body>

##3.jQuery===$

<div id = "myDiv">哈哈哈</div>
		<script>
		var my = document.getElementById("myDiv").innerHTML;
			var my1 = $("#myDiv").html();
			console.log(my);
			console.log(my1);
			console.debug(my===my1);
		</script>

##4.DOM对象与jQuery对象的相互转换

<div id = "myDiv">哈哈哈</div>
		<script>
		var my = document.getElementById("myDiv");
			var my1 = $("#myDiv");
			console.log(my);
			console.log(my1);
			//dom对象转换成jQuery对象
			console.debug($(my));
			//jQuery 对象转换成dom对象;就是取jQuery对象索引为第0位的。
			console.debug(my1[0]);
		</script>

##5.jQuery选择器
（1）id选择器
（2）类选择器
（3）标签选择器
（4）多选择器
（5）层次型选择器

<script>
		//(1)id选择器
		var i = $("#myDiv").html();
		console.debug(i);

		//(2)类选择器
		var l = $(".my").html();
		console.debug(l);

		//标签选择器
		var b = $("input")
		console.debug(b[0].value);

		//所有选择器：包含HTML页面的所有东西
		var all = $("*");
		console.debug(all);

		//多选择器
		var d = $("#myDiv,.my");
		console.debug(d);

		//层次型选择器（1）祖先，后代：找到表单中所有的 li元素
		$("#book li").css("background-color","brown");

		//匹配表单中所有的子级input元素。
		$("form>input").css("background-color","red");

		//匹配所有紧跟(第一个)在 label后面的 input 元素
		$("label+input").css("background-color", "chartreuse");
		
		//找到所有与表单同辈的 input 元素
		$("label~input").css("background-color", "chartreuse");
	</script>

##6.jQuery注册事件

```javascript
<body>
		<button οnclick="bit()">点击1</button>

		<button id="myBtn">点击2</`在这里插入代码片`button>
</body>
	<script>

	//原生JS绑定
	function bit(){
		alert(11);
	}
	$(function() {
		/*第一种注册方式
		 * 
		 * $("#myBtn").click(function() {
			alert(2);
		});*/
		
		/*第二种注册方式
		 * 
		 * $("#myBtn").on('click',function(){
			alert(3);
		})
		取消注册
		$("#myBtn").off('click')*/
		
		//第三种注册方式
		$("#myBtn").bind('click',function(){
			alert(4);
		});
		//取消第三种注册方式
		$("#myBtn").unbind('click')
		
	});
</script>


##7.克隆

```javascript
```java
<body>
		<input type="button" class="clone" value="克隆" />
		<p id="p1">
			<input type="button" class="btn" value="点我一下" />
		</p>
		<p id="p2">
		</p>
	</body>

</html>
<script>
	$("#p1").click(function(){
		$(".clone").clone().appendTo($("#p1"))
	})
</script>

qq_44845795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery获取值，页面加载事件，dom对象与jQuery对象之间的转换，jQuery选择器，注册事件

jQuery##1.jQuery获取值<body><div id = "myDiv">哈哈哈</div><script>//原生JSvar my = document.getElementById("myDiv").innerHTML;//jQueryvar my1 = $("#myDiv").html();console.log(...
复制链接

扫一扫