【jQuery】第一个JQuery程序及其分析

最新推荐文章于 2021-12-28 10:11:16 发布

Hackyle

最新推荐文章于 2021-12-28 10:11:16 发布

阅读量443

点赞数

分类专栏： FrontEnd 文章标签： js javascript jquery

本文链接：https://blog.csdn.net/ComputerGeekHack/article/details/104288838

版权

FrontEnd 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

老规矩，第一个jQuery程序，肯定是要写HelloWorld的，不要在乎其背后原理，先复制代码，在浏览器中实现起来再说。

HelloWorld

第一个JQuery程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个JQuery程序</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				alert("hello jquery!");
			});
		</script>
	</head>
	<body>
		
	</body>
</html>

**注意：**你可能要修改上文中第六行script标签中src属性，这取决于你的jQuery文件所在的位置和版本！

jQuery核心语法

基础语法是： $(selector).action()

美元符号：表示使用jQuery；
选择符（selector）：表示要“查询”和“查找”的HTML 元素；
action()：表示需要对该元素执行什么操作；

三个核心语义

事件绑定：为JQ选择器选择到的标签，绑定一个事件；
入口函数：JS代码总是写在head中，而HTML标签却在body中。head中的选择器无法~~提前调取body中的元素~~标签。
样式控制：使用JQ专有的方法来~~控制样式~~。

快速理解事件绑定

<!DOCTYPE  html>
<html>
<head>
	<meta charset="utf-8">
    <title>JQ</title>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
    <input type="button" value="点我" id="b1">
    <script> //注意，这里的js代码一定要写在该标签之后
    	//$("#b1")：根据ID选择器，选择到该标签
    	//.click：调用jq的点击事件
    	//function(){}:为该标签添加一个匿名的事件函数
    	$("#b1").click(function(){
    		alert("你点我了！");
    	});
    </script>
</body>
</html>

快速理解入口函数

<!DOCTYPE  html>
<html>
<head>
	<meta charset="utf-8">
    <title>JQ</title>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
    	/*这就是入口函数，使得在DOM文档加载完毕后，再执行里面的方法！！！
    	$(function(){
    		方法体
    	});
    	*/
    	
    	$(function(){
    		//$("#b1")：根据ID选择器，选择到该标签
        	//.click：调用jq的点击事件
        	//function(){}:为该标签添加一个匿名的事件函数
        	$("#b1").click(function(){
        		alert("你点我了！");
        	});
    	});
    	
    	/*注意，在window对象中，也可以实现类似 入口函数的代码：
    	window.onload = function(){
    		方法体
    	}
    	*/
        
        //window.onload  和 $(function) 区别：
          //window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
          //$(function)可以定义多次的。
    </script>
</head>
<body>
    <input type="button" value="点我" id="b1">
</body>
</html>

快速理解控制样式

<!DOCTYPE  html>
<html>
<head>
	<meta charset="utf-8">
    <title>JQ</title>
    <script src="js/jquery-1.8.3.js"></script>
    <script>
    	$(function(){
    		$("#div1").css("background-color","red"); //其中的参数都是CSS中的语法格式
    		$("#div2").css("backgroundColor","pink"); //其中的参数是JQ对页面控制的语法格式
    	});
    	
    </script>
</head>
<body>
	<div id="div1">div1....</div>
	<div id="div2">div2....</div>
</body>
</html>