jQuery笔记 1

最新推荐文章于 2024-08-14 15:45:18 发布

qq_41273406

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量76

点赞数

分类专栏： javaweb 文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_41273406/article/details/115481309

版权

本文详细介绍了jQuery的基础知识，包括jQuery的核心函数、DOM对象与jQuery对象的区别及互转，重点讲解了选择器的使用，如基本选择器、层级选择器和过滤选择器，是学习jQuery入门的宝贵资料。

摘要由CSDN通过智能技术生成

1. jQuery介绍

什么是jQuery?
jQuery 就是JavaScript和查询（Query），他就是辅助JavaScript开发的js类库。

jQuery的核心思想
他的核心思想是write less，do more （写得少做的多），所以他实现了很多浏览器的兼容问题。

jQuery流行程度
jQuery 现在已经成为最流行的JavaScript库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

jQuery好处
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。

2. Hello jQuery

需求：使用jQuery给按钮绑定单击事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// window.onload = function () {
   
		// 	var btnObj = document.getElementById("btnId");
		// 	// alert(btnObj);//[object HTMLButtonElement]    ====>Dom对象
		// 	 btnObj.onclick = function () {
   
		// 		 alert("js 原生的点击事件")
        //      }
        // }


		// alert($	);//检查是否加载jQuery
		$(function () {
    //表示页面加载完成之后，相当于window.onload = function (){}
		    var $btnObj = $("#btnId"); //表示按id查找标签对象
			$btnObj.click(function () {
   //绑定单击事件
					alert("jQuery 单击事件");
                }
			    
			);
			
        });

	</script>
</head>
<body>
	
	<button id="btnId">SayHello</button>

</body>
</html>

常见问题
1.使用jQuery一定要引入jQuery库。
2.jQuery中的$是一个函数。
3.怎么给按钮添加点击响应函数
第一使用jQuery查询到标签对象
第二使用标签对象.click(function(){});

3. jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。 $ () 就是调用$这个函数
1.传入参数是[函数]时：
表示页面加载完成之后。相当于 window.onload = function(){}

2.传入参数为[html 字符串]时：
会对我们创建这个html对象

3.传入参数为[选择器字符串]时：
$(“id属性值”); id选择器，根据id查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(".class属性值"); 类选择器，可以根据class属性查询标签对象

4.传入参数[DOM对象]时：
会把这个dom对象转化成jQuery对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function () {
   
        // alert("页面加载完成后，自动调用");
        //
        // $("    <div>" +
        //     "        <span>div_span1</span>" +
        //     "        <span>div_span2</span>" +
        //     "    </div>").appendTo("body");

        // alert($("button").length);

        var btnObj = document.getElementById("btn01");
        alert(btnObj);//[object HTMLButtonElement]
        alert($("#btn01"));//[object Object]
    });
	//核心函数的4个作用
	//1.传入参数为[函数]时：在文档加载完成后执行这个函数
	//2.传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
	//3.传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
	//4.传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回

</script>

</head>
<body>
    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

4.jQuery对象和dom对象的区分

4.1 什么是jQuery对象，什么是dom对象

DOM对象
1.通过 getElementById()查询出来的标签对象是 Dom 对象
2.通过 getElementsByName()查询出来的标签对象是 Dom 对象
3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom 对象

DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

jQuery对象
1.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
2.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
3.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象

jQuery 对象 Alert 出来的效果是：[object Object]

4.2 jQuery对象的本质

jQuery对象是dom数组+jQuery提供的一系列功能函数

4.3 jQuery对象和Dom对象使用区别

jQuery对象不能使用Dom对象的属性和方法
Dom对象不能使用jQuery对象的属性和方法

4.4 jQuery对象和Dom对象互转

1.dom对象转换成jQuery对象
第一：现有DOM对象
第二：$(DOM对象)就可以转换成jQuery对象

2.jQuery对象转换成DOM对象
第一：先有jQuery对象
第二：jQuery对象[下标] 取出相应的DOM对象
jQuery对象和DOM对象相互转换

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">

	$(function(){
   
		//testDiv.css("color","red")
		//testDiv.style.color = "blue";

		var arr = [12,"a",true];

		var $btns = $("button");

		// for (var i = 0; i < $btns.length; i++){
   
		//     alert($btns[i]);//[object HTMLButtonElement]
		// }

		//jQuery与Dom使用上的区别
		// document.getElementById("testDiv").innerHTML = "这是dom对象的属性innerHTML";
		// $("#testDiv").innerHTML = "这是使用jQuery来调用dom对象的属性innerHTML";//不可用

		// $("#testDiv").click(function () {
   
		// 	alert("click() 是jQuery对象的方法");
        // });

		// document.getElementById("testDiv").click(function () {//不可用
		// 	alert("DOM可以使用click()吗？不能");
        // });

		//jQuery与dom的转换
		// alert(document.getElementById("testDiv"));//[object HTMLDivElement]  dom对象
		// alert($(document.getElementById("testDiv")));//[object Object]  jQuery对象
		alert($(document.getElementById("testDiv"))[0]);//[object HTMLDivElement]  dom对象



	});

</script>
</head>
<body>
	
	<div id="testDiv">Atguigu is Very Good!</div>
	
	<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>

5. jQuery选择器（重点）

5.1 基本选择器

#ID 选择器：		根据 id 查找标签对象 
.class 选择器：	根据 class 查找标签对象 
element 选择器：	根据标签名查找标签对象 
* 选择器：		表示任意的，所有的元素 selector1，selector2 
 组合选择器：		合并选择器 1，选择器 2 的结果并返回（顺序与html的顺序一致）

p.myClass 表示标签名必须是p标签，而且class类型还要是myClass

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
   
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
   
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
   
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
            $(function () {
   
                //1.选择 id 为 one 的元素 "background-color","#bbffaa"
					//记得先加载完页面
					$("#btn1").click(function () {
   
						// alert("单击事件");

						//css() 方法可以设置和获取样式
						$("#one").css("background-color","#bbffaa");

                    });
                //2.选择 class 为 mini 的所有元素

					$("#btn2").click(function () {
   
						$(".mini").css("background-color","#bbffaa");
                    });

                //3.选择 元素名是 div 的所有元素

					$("#btn3").click(function () {
   
						$("div").css("background-color","#bbffaa");
                    });

				4.选择所有的元素
                $("#btn4").click(function () {
   
                    $("*").css("background-color","#bbffaa");
                });


                //5.选择所有的 span 元素和id为two的元素
                $("#btn5").click(function () {
   
                    $("span,#two").css("background-color","#bbffaa");
                });


            });








	
	
			
		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

5.2 层级选择器（重点）

ancestor descendant 后代选择器 ：		在给定的祖先元素下匹配所有的后代元素 
parent > child 子元素选择器：			在给定的父元素下匹配所有的子元素 
prev + next 相邻元素选择器：			匹配所有紧接在 prev 元素后的 next 元素 
prev ~ sibings 之后的兄弟元素选择器：	匹配 prev 元素之后的所有 siblings 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
   
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
   
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
   
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
   	//$(function () {});全写
				//1.选择 body 内的所有 div 元素

最低0.47元/天解锁文章

qq_41273406

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记 1

1. jQuery介绍什么是jQuery?jQuery 就是JavaScript和查询（Query），他就是辅助JavaScript开发的js类库。jQuery的核心思想他的核心思想是write less，do more （写得少做的多），所以他实现了很多浏览器的兼容问题。jQuery流行程度jQuery 现在已经成为最流行的JavaScript库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。jQuery好处jQuery 是免费、开源的，jQuery 的语法
复制链接

扫一扫

专栏目录