周末总结：jQuery

最新推荐文章于 2022-10-21 08:42:39 发布

aiYouWei啊

最新推荐文章于 2022-10-21 08:42:39 发布

阅读量98

点赞数

分类专栏：学习笔记文章标签： jQuery

本文链接：https://blog.csdn.net/qq_38987390/article/details/90597143

版权

学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jQuery

轻量级JS库
写得少，做的多
使用时应先导入jQuery包

<script src="../js/jquery-3.4.1.js"></script>

轻量级代表耦合度低

jQuery语法

$(selector).action,美元符号定义使用jQuery,括号内写要查找的元素，action指要执行的方法
一些选择器

$(“元素”) 第一个元素元素：first
最后一个元素元素：last
取中间：元素：eq(坐标)

function bigger(){
		//取字号
		var size = $("p").css("font-size");
		console.log(size);
		//去掉单位，便于增加字号
		size = size.replace("px","");
		console.log(size);
		//将字号+1再设置给段落
		$("p").css("font-size",++size+"px")
	}

jQuery对象

相当于把DOM数组封装到jQuery对象中，并定义API
jQuery本质上就是DOM对象

$(DOM) 将DOM对象转换为jQuery对象

jQuery提供的对象一般都返回这个对象，所以可以再次调用别的方法
例如：$(img).width(250).height(250);

	function print1(){
		//使用选择器获取的是jQuery对象
		var $ps = $("p");
		console.log($ps);
		for(var i=0;i<$ps.length;i++){
			//从jQuery中获取的值是DOM
			var p = $ps[i]
			console.log(p.innerHTML);
		}
	}

jQuery选择器

基本选择器

元素选择器：$(“标签名”)
类选择器： $(".class属性名")
id选择器：$("#id")
选择器组：$("#id,名称。。。。")

层次选择器

在select1元素下，选中所有满足select2的子孙元素
- $(“select1 select2”)
在select1元素下，选中所有满足select2的子元素
- $(“select > select2”)
选中select1元素的满足select2的下一个弟弟
- $(“select1 + select2”)
选中select1元素下满足select2的所有弟弟
- $(“select1 ~ select2”)

		//2.层次选择器
		//2.1 选择子孙/儿子
		//和css派生选择器一样
		//2.2 选择弟弟
		console.log($("#gz+li")) //类型一样可以省略后i面
		console.log($("#gz~li"))

过滤选择器

基本过滤选择器
- ：first 第一个：last最后一个
- ：not(select) 把select排除在外
- ：even 挑选偶数行
- ：odd 挑选奇数行
- ：eq(index) 下标=index的元素
- ：gt(index) 下标大于index的元素
- ：lt(index) 下标小于index的元素

		console.log($("li:first"));
		console.log($("li:even"));
		console.log($("li:eq(1)"));
		console.log($("li:not(#gz)"));

内容过滤选择器
- 根据文本定位内容
- ：contains(“text”) 匹配包含有指定文本的元素
- ：empty 不包含元素或者内容为空的元素

	$("li:contains('海')")

可见性过滤选择器
- ：hidden 匹配所有不可见元素
- ：visible 匹配所有可见元素

	$("li:hidden")

属性过滤选择器
- 元素[attrible] 匹配含有attrible属性的元素
- 元素[attrible=value] 匹配attrible=value的元素
- 元素[attrible=value] 匹配attrible属性不等于value的元素

	$("li[style]")

状态过滤选择器
- ：enable 可用元素
- ：disable 不可用元素
- ：checked 选中的checkbox
- ：selected选中的option

readonly 只读，但数据依然可以提交给服务器
disabled 不可用数据不能提交给服务器

	console.log($("input:enabled"));
	console.log($("input:checked"));

表单选择器

：text 匹配文本框等等
：表单元素

jQuery操作DOM

读写节点

读写内容（双标签之内的内容）
- html()方法，等价于innerHTML
- text()方法，等价于innerText

		console.log($("p:eq(0)").html());
		$("p:first").html("<p>jQuery对<u>DOM操作</u>提供了支持</p>");
		//text()方法同上

读写值（表单控件内有值）
- val() 等价于value

		console.log($(":button:first").val());
		$(":button:first").val("BBB")

读写节点属性值
- attr() 等价于get/setAttribute()

		console.log($("img:first").attr("src"));
		$("img:first").attr("src","../image/3.jpg")

增删节点

首先创建节点，其次在插入
插入DOM节点
- parent.append(obj) 作为最后一个儿子添加
- parent.prepend(obj) 第一个儿子添加
- brother.after(obj) 下一个兄弟添加
- brother.before(obj) 上一个兄弟添加

		//2.1创建节点
		var $li1=$("<li>天津</li>");
		var $li2=$("<li>苏州</li>");
		console.log($li1);
		//2.2增加节点
		$("ul").prepend($li1);
		$("#gz").before($li2);

删除节点
- obj.remove() 删除节点
- obj.remove(selector) 删除满足条件的节点
- obj.empty() 清空节点

$("li:last").remove();

遍历节点:查找某个节点的亲戚

使用场景：有时候我们调用别人的方法，得到一个节点，对其进行一些操作，此时无法写选择器，只能调用这样的方法
- children()/children(select) 直接子节点
- next()/next(select) 下一个兄弟
- prev()/prev(select) 上一个兄弟
- siblings()/silblings(select) 所有兄弟
- find(select) 查询满足选择器的所有后代

//假设调用别人的方法得到了广州
		var $gz=$("#gz");
		//要获取广州的亲戚进行进一步处理
		console.log($gz.parent());
		
		console.log($gz.prev());
		
		console.log($gz.siblings());
		
		//查询
		var $ul = $("ul");
		//获取列表的孩子做进一步处理
		//获取下标大于二的孩子
		console.log($ul.find("li:gt(2)"));

样式操作

addClass(" ") 追加样式
removeClass(" ") 移除指定样式
removeClass() 移除所有样式
togleClass（" "）切换样式
hasClass(" ") 判断是否有某个样式
css("") 读取CSS样式
css("","") 设置多个样式

//样式操作
		//增加一个样式（*）
		$("p:first").addClass("big").addClass("improtant");
		//删除一个样式
		$("p:first").removeClass("big").removeClass("important");
		
		//判断元素是否包含某样式
		console.log($("p:first").hasClass());
	//切换样式
	$("p:first").toggleClass("big");

如何判断为DOM对象或者jQuery对象

通过jQuery选中的对象是jQuery对象
通过$()转换而来的是jQuery对象
jQuery赋值方法一般返回的还是jQuery对象
jQuery取值方法若返回节点则为jQuery对象
jQuery取值方法返回文字则是String对象

可以通过控制台打印观察

jQuery 入口函数与 JavaScript 入口函数的区别

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery事件

jquey事件

	$(function(){
		//给按钮后绑定单击事件
		$(":button:eq(0)").click(function(e){
			alert("520");
			//此事件对象被jQuery做了封装
			//因为事件对象是浏览器创建的
			//不同浏览器创建事件对象有区别
			//开发时要兼顾这个区别很麻烦
			//jQuery就是想解决这个麻烦，将他们的取别进行统一，提供统一的方法
			
			// 取消冒泡 :e.stopPropagation();
			// 获取事件源 ：e.target;
			console.log(e);
		});

jQuery后绑定事件，
：hover（function()1,function2()）是鼠标事件,第一个函数鼠标悬停触发，第二个函数鼠标离开触发，该事件是jQuery特有的事件，必须使用jQuery后绑定

	$(function(){
		//后绑定事件，该事件是jQuery特有的事件，必须使用jQuery后绑定
		$("img").hover(
				function(){
					//console.log(1);
					//$(this).width(250).height(250);
					//$(this).addClass("big");
					//$(this).toggleClass("big");
					$(this).css("width","250px").css("height","250px");
				},  //鼠标悬停时调用
				function(){
					//console.log(2);
					//$(this).width(200).height(200);
					$(this).css("width","200px").css("height","200px");
				}   // 鼠标离开时调用
				);
	});

obj.trigger(“事件类型”) 模拟操作
- 简写$obj.事件();

$(function(){
		//给单机按钮绑定单机事件
		$("#btn").click(function(){
			//设置定时器
			var n =0;
			var id = setInterval(function(){
				//获取下一个要处理的文本框
				var $text = $(":text").eq(n);
				//console.log($text);
				//模拟光标切入事件
				$text.trigger("focus");
				//生成随机数，写入框内
				var s = parseInt(Math.random()*100);
				$text.val(s);
				//都处理完停止定时器
				if(n==$(':text').length-1){
					clearInterval(id);
					console.log("定时器停止");
				}
				n++;
			},2000);

jQuery效果

隐藏与显示

语法：hide()隐藏/show()显示

$("img").show(3000);//显示图片，第一个参数为时间
$("img").hide(3000);
//参数2是一个函数jQuery会在执行动画完成后自动调用他，这样的函数成为回调函数

滑动显示与隐藏

语法 obj.slideDown()/obj.slideUp()

$("img").slideDown(3000); //上下滑动式动画改变
$("img").slideUp(3000);

淡入淡出式

语法:obj.fadeIn()/obj.fadeOut

$("img").fadeIn(3000);//淡入淡出式
$("img").fadeOut(3000);

自定义动画样式
- 语法：animate(偏移位置,执行时间,回调函数)
- 偏移位置：{} 描述动画执行之后的元素样式
- 执行时间：毫秒数
- 回调函数
```
function f4(){
	$("img").animate({'left':'300px'},3000).animate({'top':'300px'},3000)
	.animate({'left':'0px'},3000).animate({'top':'0px'},3000);
	
}
```