jQuery基本语法和选择器
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
- 点赞
- 收藏
- 关注作者
评论（0）