其他分享
首页 > 其他分享> > jQuery内容复习大纲

jQuery内容复习大纲

作者：互联网

目录

        本人也是一个小菜鸡，请多多交流~~！！感谢各位卷王！

一、jQuery 基本介绍

二、使用jQuery输出第一个 hello world

 三、$() 是什么

四、jQuery 和 DOM 对象的区别

五、jQuery 选择器

六、jQuery 属性操作

七、DOM 增删改

八、CSS 样式操作 

九、jQuery 动画显示 

十、jQuery 中的事件

本人也是一个小菜鸡，请多多交流~~！！感谢各位卷王！

一、jQuery 基本介绍

二、使用jQuery输出第一个 hello world

// src： 放入项目中的 jQuery 路径
<script src="../jQuery/jquery-3.6.0.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script type="text/javascript">

    /*使用 js 输出 hello */
    // window.onload = function () {
    //    var btn = document.getElementById("btn");
    //    btn.onclick = function () {
    //        alert("say Hello")
    //    }
    // }
    $(function () { // $(): 相当于 onl oad 事件，页面加载之后。
        var $btn = $("#btn"); //获取 btn 对象，相当于 document.getElementById("btn")。
        $btn.click(function () { //为 btn 绑定单击事件
            alert("hello world ！！")
        });
    });
</script>
<body>
<input type="button" id="btn" value="sayHello">
</body>
</html>
为对象绑定单击事件： $对象名.click() ；

 三、$() 是什么

四、jQuery 和 DOM 对象的区别

五、jQuery 选择器

 5.1 基础选择器

注意：搜索元素时一定要在页面加载完成之后，不然加载不到。

//第一种方法
$(function(){
    //表示页面加载完成之后

});

//第二种方法
$(document).ready(function(){


});

5.2 层级选择器

5.3 基本过滤选择器 

$(document).ready(function(){
				//1.选择第一个 div 元素
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
                /*第一个 div 索引就是1 ，第二个div 索引就是 2*/
                /* 常用于表格变色  */
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
			});

 

5.4 内容过滤选择器

	$(document).ready(function(){
				//1.选择 含有文本 'di' 的 div 元素
				$("#btn1").click(function () {
					$("div:contains(di)").css("background-color","#bbffaa")
				});

				//2.选择不包含子元素(或者文本元素) 的 div 空元素
				$("#btn2").click(function(){
					$("div:empty").css("background","#bbffaa")
				});
				//3.选择含有 class 为 mini 元素的 div 元素
				$("#btn3").click(function(){
					/*注意：最后所选的是 div 元素。不是 class 元素*/
					$("div:has(.mini)").css("background", "#bbffaa");
				});

				//4.选择含有子元素(或者文本元素)的div元素
				$("#btn4").click(function(){
					$("div:parent").css("background", "#bbffaa");
				});
			});

5.5 属性过滤选择器

$(function() {
		//1.选取含有 属性title 的div元素
		$("#btn1").click(function() {
			$("div[title]").css("background", "#bbffaa");
		});
		//2.选取 属性title值等于'test'的div元素
		$("#btn2").click(function() {
			$("div[title='test']").css("background", "#bbffaa");
		});
		//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("#btn3").click(function() {
			$("div[title!='test']").css("background", "#bbffaa");
		});
		//4.选取 属性title值 以'te'开始 的div元素
		$("#btn4").click(function() {
			$("div[title^='te']").css("background", "#bbffaa");
		});
		//5.选取 属性title值 以'est'结束 的div元素
		$("#btn5").click(function() {
			$("div[title$='est']").css("background", "#bbffaa");
		});
		//6.选取 属性title值 含有'es'的div元素
		$("#btn6").click(function() {
			$("div[title*='es']").css("background", "#bbffaa");
		});
		
		//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("#btn7").click(function() {
			$("div[id][title*='es']").css("background", "#bbffaa");
		});
		//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("#btn8").click(function() {
			$("div[title][title!='test']").css("background", "#bbffaa");
		});
	});

5.6 表单过滤选择器

5.7 表单对象属性过滤选择器

//jQuery 中的 each 方法可以进行遍历
// this 代表循环到的当前对象
$("").each(function(){
    alert(this);
});

事件中的 function 函数中的  this 对象：代表了当前正在响应该事件的dom 对象。

 如上图， this 就代表了 id 为 checkedAllBox 的 标签。this.value 就是 这个标签的value。

 5.8 元素的筛选

六、jQuery 属性操作

 attr()  和 prop() 的区别：

如果某个元素没有获取的属性，attr() 会返回 undefined 【官方认为 undefined 就是错误，不利于用户辨认，所以出出现了 prop() 方法】， prop 会返回 false 。prop比较直观一些。

attr() 和 prop 都可设置属性值，或者修改属性值。

七、DOM 增删改

以上是内部插入，插入到某个标签内部。

 b：可以是内容，可以是对象。

 a.appendTo(b); 将 a 增加到 b 的后面去

a.append(b);      将 b 放到 a 的后面

a.prependTo(b) :  将 a 插入到 b 的前面

a.prepend(b) ：   将 b 插入到 a 的前面

 

 外部插入是把 内容 插入到某个标签外部。

 a.afert(b);                 将 b 插入到 a 的后面

a.inertAfter(b);            将 a 插入到 b 的后面

a.before(b);                将 b 插入到 a 的前面

a.insertBefore(b)        将 a 插入到 b 的前面

这么多插入方法怎么区分呢？

        一个简单的方法就是，方法短的【after，before，append，prepend】就操作 () 里面的内容 放到  前面的指定位置去。

 a.replaceWith (b)：  用 b 替换掉所有的 a 【不管 a元素 有几个 都替换成一个 b】

a.replaceAll(b);          a 替换所有的 b 【一个 b 元素 被替换一个 a ，俩个 b 元素 被替换俩个 a 】

a.empty()                删除 a 标签中的内容

a.remove()              删除 a 标签  

八、CSS 样式操作 

<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
	
	div.whiteborder{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: #96E555;
	}
	
	div.blueBorder{
		border: 5px blue solid;
	}
	
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		
		var $divEle = $("div:first");

		$('#btn01').click(function(){
			//addClass() - 向被选元素添加一个或多个类
			// 一个或者多个样式 用 空格分开
			$divEle.addClass("redDiv blueBorder");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 从被选元素删除一个或多个类 
			$divEle.remove();
		});
	
		
		$('#btn03').click(function(){
			//toggleClass() - 对被选元素进行添加/删除类的切换操作 
			$divEle.toggleClass("redDiv blueBorder")
		});
		
		
		$('#btn04').click(function(){
			//offset() - 返回第一个匹配元素相对于文档的位置。
			var offset = $divEle.offset();
			console.log(offset);
		});
	})
</script>

 使用 offset 获取位置：top 表示距离浏览器顶部是多少   left 表示距离浏览器左边是多少

			//设置位置
			$divEle.offset({
				top:100,
				left:200
			});

九、jQuery 动画显示 

以上方法都可以增加参数：【fadeTo：可以增加三个参数：时间、透明度、函数】

        第一个参数：动画的执行时长，单位毫秒

        第二个参数：动画的回调函数，动画执行完执行的函数

$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(1000)
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(2000)
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").hide(2000,function () {
					alert("动画执行完")
				})
			});

			// 无限动画
			// function a(){
			// 	$("#div1").toggle(1000,a)
			// }
			// a();
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(2000)
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(2000,function () {
					alert("淡出执行完")
				});
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(2000,0.5)

			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(2000)
			});
			// 无限动画
			// function a(){
			// 	$("#div1").fadeToggle(1000,a)
			// }
			// a();
		});

十、jQuery 中的事件

$(function(){
				// 1.通常绑定事件的方式
				$("h5").click(function () {
					console.log("click单击事件")
				});
				//2.jQuery提供的绑定方式：bind()函数
				$("h5").bind("click",function () {
					console.log("bind绑定的 click事件");
				});
				//3.合并“鼠标移入”和“鼠标移出”事件
				$("h5").bind('mouseover mouseout',function () {
					console.log("bind绑定的鼠标移入”和“鼠标移出”事件");
				});
				//4.合并单击事件
				$("h5").bind('mouseover mouseout click',function () {
					console.log("bind绑定的鼠标移入”和“鼠标移出”事件");
				});
				//5.切换元素可见状态
				$("div div").toggle(2000);
				//6.只绑定一次
				$("h5").one('mouseover mouseout',function () {
					console.log("bind绑定的鼠标移入”和“鼠标移出”事件");
				});
				// 7、使用 live 绑定事件， 所有符合匹配器的元素都会有这个事件。包括后创建的
				
				/*这个新增加的 h5 是没有单击事件的，
				但是如果用 live 给所有的 h5 绑定点击事件，那么这个新增加的 h5 也会有单击事件 */
				$("\t<br><br><h5 class=\"head\">什么是jQuery?</h5>").appendTo($("h5"))
				$("h5").live("click",function () {
					alert("单击事件")
				});
			});

 事件的冒泡

举个简单的例子：当父元素和子元素都有单击事件，当点击子元素的时候，父元素的单击事件也会触发。

 

在 子元素的点击事件中 加个 return false ；就阻止了事件冒泡。 

 

标签：jQuery,function,复习,元素,选择器,div,click,大纲
来源： https://blog.csdn.net/aetawt/article/details/122742605