jQuery基本语法和选择器

举报
tea_year 发表于 2021/12/23 00:42:40 2021/12/23
【摘要】 JQuery 一.JQuery基础语法 1.概念 JQuery是javaScript的一个库,Jquery基于javascript开发出来。目的就是为了简化javascript的开发。 宗旨:“W...

JQuery

一.JQuery基础语法

1.概念

JQuery是javaScript的一个库,Jquery基于javascript开发出来。目的就是为了简化javascript的开发。

宗旨:“Write Less,Do More”,提倡写更少的代码。

核心特性:

  • 链式语法
  • 高校灵活的CSS选择器使用和扩展
  • 丰富的插件

官网:https://jquery.com/

三大版本:

目前jQuery有三个大版本。
1.X:兼容IE678,使用最为广泛,官网只做BUG维护,功能不再新增。因此一般项目来说,使用1.X版本就可以了,最终版本:1.12.4 (2016年5月20日)

2.X不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

3.X不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)

————————————————

jd:1.6.4

sina:1.7.3

3.选择器和方法

3.1 使用jquery访问三个div元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试页面jquery</title>
		<!-- 要导入jquery函数库 -->
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			// window.onload=function(){		
// }
		//再次强调加载事件:先执行HTML、CSS,最后JS代码。
		//1.jquery 加载事件
		//$(document):当前文档对象;
		//.ready():方法;参数:匿名函数对象,传递进去了;
		
		// $(document).ready(function(){
		// 	alert('...');
		// })
		//2.再简便一点;建议大家使用这种方式,简单;
		// $(function(){
		// 	alert('...测试');
		// });
		//3.原来的代码;
		$(function(){
			var div1=$("div")[0];
			console.log(div1.innerHTML);
			
			var div2=$("#two");
			console.log(div2.html()); //html():代替了之前的innerHTML
			
			var div3=$(".three")[0];
			console.log(div3.innerHTML);
		})
		//单个元素的时候,直接是html(),代替了之前的innerHTML。
		
		// window.onload=function(){				
		// 	var div=document.getElementsByTagName("div")[0];
		// 	alert(div.innerHTML);
		// 	//获得的是Element元素
		// 	var div2=document.getElementById("two");
		// 	alert(div2.innerHTML);
		// 	//3.根据类样式的名,来获得元素集合
		// 	var div3=document.getElementsByClassName("three")[0];
		// 	alert(div3.innerHTML);
		// }			
	</script>
</head>
<body>
	<div>第一个div的内容???</div>
	<div id="two">第二个div</div>
	<div class="three">第三个使用类样式的div</div>
</body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

如何不使用innerHTML呢?

.first()

.last()

.eq(0)

3.2 基本选择器

1.id选择器 $("#id名")

2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素

3.标签选择器 $(“div”)格式:

		$("标签名"),可以访问对应的标签元素

  
 
  • 1

4.*

5.并集选择器

6.交集选择器

3.3 层次选择器

7.后代选择器 $(“a b”)

8.子代(级)选择器 $(“parent>child”)

9.后继选择器 $(“prev+next”)

10.兄弟|同辈选择器 $(“prev~sliblings”)

3.3 基本方法

之前在js代码有很多属性,比较长,jQuery为了简化这些长的属性,就封装成了一些方法。

html()->innerHTML,会把下面的带有html标签的格式给原封不动的输出。

val()–>value

size()–>length

text()–>只出来当前元素下的文本,不会出来html标签的格式.

css():设置当前元素的样式,语法:元素对象.css(“属性名”,“值”)

addClass():增加元素的样式,addClass(“样式名”)

removeClass():移除元素的样式,removeClass(‘样式名’)

总结:

1.基本选择器,重点前3个;id 类样式 标签;其他了解即可。

2.层次选择器,重点子级选择器 后继选择器;

3.基本方法,html() size() css() addClass() removeClass()

4.案例

4.1 计算器案例|购物车统计

4.2 表单验证案例

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/105849806

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。