jQuery:语法-核心函数是什么

2021-10-20

jquery安装

Download jQuery

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

核心函数

$ 是什么?

* $本质是函数的引用，jQuery函数的引用。
* $ == jQuery  ==>> 	$() == jQuery()  == 核心函数

window.onload 与 $() 区别

●触发时机：前者是整个文档完全加载后执行，后者是在整个文档绘制成功后执行
●书写数量：前者在整个文档中只可以书写一次，如书写多次，后面会覆盖前面代码，后者可以书写多次
●语法格式：前者只有一种语法格式，后者有两种语法格式

window.onload = function(){		//被覆盖
		alert("onload1");
	}
	window.onload = function(){
		alert("onload2");					//显示
	}

// 第一种语法格式
$(function(){
  alert("核心函数");		//显示
});
$(function(){
  alert("核心函数2");		//显示
});

// 第二种语法格式
$(document).ready(function(){
  alert("核心函数3");		//显示
});

核心函数的 4 个作用

传入参数为 [函数] 时：在文档加载完成后执行这个函数,类似window.onload的功能 // $(function(){})
传入参数为 [选择器字符串] 时：根据这个字符串查找元素节点对象 // $(选择器)
传入参数为 [HTML字符串] 时：根据这个字符串创建元素节点对象 // $(HTML标签)
传入参数为 [DOM对象] 时：将DOM对象包装为jQuery对象返回 // $(DOM对象)

jQuery 和 DOM 对象的转换

* DOM对象为什么转换为jQuery对象？

因为：需要使用jQuery强大的方法

* DOM对象 -> jQuery对象：$(DOM对象)

* jQuery对象为什么需要转换为DOM对象？

因为：极个别情况jQuery没有实现，需要原生js实现。

* jQuery -> DOM对象：将jQuery看成数组或集合。

（本质jQuery是伪数组实现，jQuery封装了dom对象）

* $bj[0] * $bj.get(0)

js操作文本

.innerText
.innerHTML
.value

jQuery操作文本

.text() eg： text()取值 || text("文本")赋值
.html()
.val()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM对象和jQuery对象</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//分别使用DOM对象和jQuery对象获取div中的文本
		//使用DOM对象调用DOM方法
		$("#dom2dom").click(function(){
			var tDiv = document.getElementById("testDiv");
			alert(tDiv.innerText);
		});
		
		//使用jQuery对象调用jQuery方法
		$("#jQuery2jQuery").click(function(){
			var $jValue = $("#testDiv").text();
			alert($jValue);
		});
		
		//使用DOM对象调用jQuery方法
		$("#dom2jQuery").click(function(){
			var tDiv = document.getElementById("testDiv");
			//将DOM转换为jQuery对象
			alert($(tDiv).text());
// 			alert(tDiv.text());
		});
		
		//使用jQuery对象调用DOM方法
		$("#jQuery2dom").click(function(){
			var $divEle = $("#testDiv");
			//将jQuery对象转换为DOM对象
			alert($divEle.get(0).innerText);
// 			alert($divEle[0].innerText);
// 			alert($divEle.innerText);
		});
	});
</script>
</head>
<body>
	<div id="testDiv">挤进IT界，注定你优秀！</div>
	<br/>
	<button id="dom2dom">使用DOM对象调用DOM方法</button>
	<button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
	<button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
	<button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
</body>
</html>

阅读剩余

作者：Tin

链接：http://www.tinstu.com/2113.html

文章版权归作者所有，未经允许请勿转载。

THE END