jQuery笔记

最新推荐文章于 2022-02-14 18:50:52 发布

静波波呀

最新推荐文章于 2022-02-14 18:50:52 发布

阅读量101

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46497503/article/details/116380691

版权

1、jQuery介绍

什么是jQuery？
jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript开发的 js 类库。

jQuery的核心思想是 write less，do more(写的更少，做得更多)，所以它实现了很多浏览器的兼容问题

jQuery现在已经成为最流行的JavaScript库

常见问题：
1、使用jQuery一定引入 jQuery 库吗？答案：是，必须引入。
2、jQuery中的 $ 到底是什么？答案：它是一个函数。
3、怎么为按钮添加点击响应函数的？
(1) 使用 jQuery 查询到标签对象
(2) 使用标签对象.click(function(){});

<!doctype html>

<html>
    <head>
        <title></title>
         
		<script type="text/javascript" src="D:/jQuery/jquery-1.12.4.js"></script>
		
		<script type="text/javascript">
		    window.onload = function(){
			    var butObj = document.getElementById("but1");
				butObj.onclick = function(){
				    alert("原生");
				}
			} 
			
			
			$(function(){// 表示页面加载完成之后，相当于 window.onload = function(){}
			    var $butObj = $("#but2");// 表示按id查询标签对象
				$butObj.click(function(){// 绑定单击事件
				    alert("jQuery 的单击事件");
				});
			});
		</script>
		
    </head> 
    
	<body>
	    <input type="button" id="but1" value="按钮1"/>
	    <input type="button" id="but2" value="按钮2">
	</body>

</html>

$ jQuery的核心函数，能完成jQuery的很多功能。$() 就是调用 $ 这个函数。

1、传入参数为函数时：表示页面加载完成之后。相当于 window.onload = function(){}

2、传入参数为 HTML对象时：会为我们创建 html 标签对象

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

4、传入参数为 DOM 对象时：会把这个dom对象转换为jQuery对象。

<!doctype html>

<html>
    <head>
        <title></title>
         
		<script type="text/javascript" src="D:/jQuery/jquery-1.12.4.js"></script>
		
		<script type="text/javascript">
		    // 传入参数为函数时，在文档加载完成之后执行这个函数
		    $(function(){
			    alert("页面加载完成之后，自动调用！");
				
				// 传入参数为HTML字符串时，根据这个字符串创建元素节点对象
				$("<button>啊哈</botton>").appendTo("body");
				
				// 传入参数是选择器字符串时，根据这个字符串查找元素节点对象
				alert($("input").length);
				
				// 传入参数是dom对象时，将dom对象转换为jQuery对象
				var butObj = document.getElementById("but1");// 获取dom对象
				alert($(butObj));
			});
		</script>
		
    </head> 
    
	<body>
	    <input type="button" id="but1" value="按钮1"/>
		<input type="button" id="but2" value="按钮2"/>
	</body>

</html>

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]

jQuery 对象的本质是什么？
jQuery 对象是 dom对象的数组 + jQuery 提供的一系列的功能函数。

jQuery 对象和 Dom 对象的使用区别？
jQuery 对象不能使用 Dom 对象的属性和方法。
Dom 对象不能使用 jQuery 对象的属性和方法。

Dom 对象和 jQuery 对象互转：
1、dom 对象转换为 jQuery 对象
（1）先有dom对象。
（2）$(dom对象); 就可以转化称为 jQuery 对象。
2、jQuery 对象转化为 dom 对象
（1）先有 jQuery 对象。
（2）jQuery 对象[下标取出相应的dom对象]。

jQuery选择器重点

过滤选择器

包括基本过滤选择器、内容过滤选择器、属性过滤选择器、表单过滤选择器、元素筛选

jQuery的属性操作

html()：它可以设置和获取起始标签和结束标签中的内容。和dom属性的 innerHTML 一样。
test()：它可以设置和获取起始标签和结束标签中的文本。和dom属性的 innerText 一样。
val()：它可以设置和获取表单项的value属性值。和dom属性的 value 一样。val可以设置多个表单项的选中状态。

<!doctype html>

<html>
    <head>
        <title></title>   
		<script type="text/javascript" src="D:/jQuery/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
			    // 不传参数是获取，传参数是设置
			    alert( $("div").html() );
				$("div").html("aaaa");
				
				// 不传参数是获取，传参数是设置
				alert($("div").text());
				$("div").text("bbbb");
				
				// 不传参数是获取，传参数是设置
				$("button").click(function(){
				    alert($("#username").val());
					$("#username").val("cccc");
				});
				
				$(":radio").val(["radio1"]);
			})
			
		</script>	
    </head> 
    
	<body>
	    <div>我是div标签 <span>我是div中的span标签</span></div>
		
		<input type="text" id="username" />
		<button>按钮</button>
		
		<input name="radio" type="radio" value="radio1" />radio1
		<input name="radio" type="radio" value="radio2" />radio2
	</body>
</html>

attr()：可以获取和设置属性的值，不推荐操作checked、readOnly、selected、disabled等等。attr方法还可以操作非标准的属性。比如自定义属性。
prop()：可以获取和设置属性的值，只推荐操作checked、readOnly、selected、disabled等等。

<!doctype html>

<html>
    <head>
        <title></title>       
		<script type="text/javascript" src="D:/jQuery/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
			    alert( $(":radio:first").attr("name") );// 获取
				$(":radio:first").attr("name", "aaaa");// 设置
				
				alert( $(":radio:first").attr("checked") );// 官方觉得返回 undefined 是一个错误
				alert( $(":radio:first").prop("checked") );// 返回 false
				
				$(":radio:first").attr("abc", "abcValue");
			})
			
		</script>
		
    </head> 
    
	<body>
		<input name="radio" type="radio" value="radio1" />radio1
		<input name="radio" type="radio" value="radio2" />radio2
	</body>
</html>

DOM的增删改

1、内部插入：
appendTo()：a.appendTo(b)：把 a 插入到 b 子元素末尾，成为最后一个子元素。
prependTo()：a.prependTo(b)：把 a 插入到 b 所有子元素前面，成为第一个子元素。

2、外部插入：
insertAfter()：a.insertAfter(b)：得到 ba
insertBefore()：a.insertBefore(b)：得到 ab

3、替换：
replaceWith()：a.replaceWith(b)：用 b 替换掉 a
replaceAll()：a.replaceAll(b)：用 a 替换掉所有 b

4、删除：
remove()：a.remove()：删除 a 标签
empty()：a.empty()：清空 a 标签里的内容，但是 a 标签还在

注：在事件响应的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象。

CSS样式操作

addClass()：添加样式
removeClass()：删除样式
toggleClass()：有就删除，没有就添加样式
offset()：获取和设置元素的坐标

当前这个样式只能div使用
div.blueBorder{
    border: 5px blue solid;
}
使用该样式的标签，其后代里面必须有一个 a 标签
.promoted a {
    color:#F50;
}

jQuery动画

基本动画
show()：将隐藏的元素显示
hide()：将可见的元素隐藏
toggle()：可见就隐藏，不可见就显示

以上动画方法都可以添加参数：
1、第一个参数是动画的执行时长，以毫秒为单位
2、第二个参数是动画的回调函数（动画完成后自动调用的函数）

淡入淡出动画
fadeIn()：淡入（慢慢可见）
fadeOut()：淡出（慢慢消失）
fadeTo()：在指定时长内慢慢的将透明度修改到指定的值。0为透明，1为完全可见，0.5为半透明
fadeToggle()：淡入/淡出切换

jQuery事件操作

$(function(){}); （jQuery的页面加载完成之后）和 window.onload = function(){} （原生 js 的页面加载完成之后）的区别？

它们分别在什么时候触发？
1、jQuery的页面加载完成之后，是浏览器的内核解析完页面的标签，创建好DOM对象之后就会马上执行。
2、原生 JS 的页面加载完成之后，出了要等浏览器的内核解析完成，标签创建好 DOM 对象之外，还要等标签显示时需要的内容加载完成。

它们触发的顺序？
jQuery的页面加载完成之后先执行，原生 JS 的页面加载完成之后后执行。

它们执行的次数？
1、jQuery的页面加载完成之后，是把全部注册的function函数，依次按顺序全部执行。
2、原生 JS 的页面加载完成之后，只会执行最后一次的赋值函数。

jquery中其他事件的处理方法

click()：它可以绑定单击事件，以及触发单击事件
mouseover()：鼠标移入事件
mouseout()：鼠标移出事件
bind()：可以给元素一次性绑定一个或多个事件
one()：使用上跟 bind() 一样，但是 one 方法绑定的每个事件都只会响应一次。
unbind()：跟 bind 方法相反的操作，解除事件的绑定
live()：也是用来绑定事件。它可以用来绑定选择匹配的所有元素的事件，即使这个元素是后面动态创建出来的。

事件的冒泡

什么是事件的冒泡？
事件的冒泡是指：父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里面去响应。

如何阻止事件的冒泡？
在子元素的事件函数体内，return false 就可以阻止事件的冒泡传递。

jQuery事件对象

事件对象，是封装有触发的事件信息的一个javascript对象。
如何获取JavaScript事件对象呢？
在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event。这个event就是JavaScript传递参数事件处理函数的事件对象。

<!doctype html>

<html>
    <head>
        <title></title>
         
		<script type="text/javascript" src="D:/jQuery/jquery-1.12.4.js"></script>
		<script type="text/javascript">
		
			// 原生javascript获取事件对象
			window.onload = function(){
			    document.getElementById("div1").onclick = function(event){
				    console.log(event);
				}
			}
			
			// jQuery代码获取事件对象
			$(function(){
			    $("#div1").click(function(event){
				    console.log(event);
				})
			});
			
			// 使用bind同时对多个事件绑定同一个函数，怎么获取当前操作是什么事件
			$(function(){
			    $("#div1").bind("mouseover mouseout", function(event){
				    if(event.type == "mouseover"){
					    console.log("鼠标移入");
					}else if(event.type == "mouseout"){
					    console.log("鼠标移出");
					}
				})
			});
		</script>
		
    </head> 
    
	<body>
		<div id="div1" style="width:300px; height:300px; background-color:#CCFFFF; border-color:red;"></div>
	</body>

</html>