jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。
Jquery选择器
- 1.ID选择器:即通过id获取对应的标签,$('#实际id')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1"><p>id="d1"</p></div>
<div id="d2">id="d2"</div>
<script src="jquery-1.12.4.js"></script> <!--导入jquery脚本-->
<script type="text/javascript">
$('#d1').css('color','red');
$('#d2').css('color','blue');
</script>
</body>
</html>
效果:

- 2.标签名选择器element $('标签名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1"><p>id="d1"</p></div>
<div id="d2">id="d2"</div>
<script src="jquery-1.12.4.js"></script> <!--导入jquery脚本-->
<script type="text/javascript">
$('div').css('color','red');
$('p').css('color','blue');
</script>
</body>
</html>
效果:

- 类选择器 通过找到类,进行操作 $('.类名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1"><p>id="d1"</p></div>
<div class="d2">id="d2"</div>
<script src="jquery-1.12.4.js"></script> <!--导入jquery脚本-->
<script type="text/javascript">
$('.d1').css('color','red');
$('.d2').css('color','blue');
</script>
</body>
</html>
效果:

- *选择器 匹配所有元素 $('*')
- 群组选择器 以上选择器的组合,同时匹配多个$('#id,.类,div')
- 后代选择器 即通过父标签找到子标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="d1"><p>id="d1"</p>
<div class="d2">id="d1-d2"</div>
</div>
<div class="d2">id="d2"</div>
<script src="jquery-1.12.4.js"></script> <!--导入jquery脚本-->
<script type="text/javascript">
$('.d1 .d2').css('color','red');
</script>
</body>
</html>
效果:

- 指定选择器 即通过标签指定匹配的类 $('dev.类名')
- 子选择器 即通过父标签找到所有的子标签
- next选择器 找到匹配标签的下一个
$('选择器+下一个选择器')或者
$('选择器').next(下一个选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div id="demo">div</div>
<P>p4</P>
<p>p5</p>
<p>p6</p>
<P>p7</P>
<script rel="script" src="jquery-1.12.4.js"></script>
<script>
//$('#demo').next('p').css('color','red'); //第一种方法
$('#demo+p').css('color','red'); //第二种方法
</script>
</body>
</html>
效果:

-
nextall选择器 取出匹配的选择器后面所有的 $('选择器~下一个选择器')或者$('选择器').nextAll('下一个选择器')
-
基本筛选器:
- :first 第一个
- :not(selector) 取反
- :even 奇数行
- :odd 偶数行
- :eq(index) 等于
- :gt(index) 大于
- :last 最后一个
- :lt(index) 小于
- :header 匹配如 h1, h2, h3之类的标题元素
- :animated 只有对不在执行动画效果的元素执行一个动画特效
- :focus 添加一个"focused"的类名给那些有focus方法的元素
-
属性
- [attribute] 属性名 $('div[id]')
- [attribute=value] 指定属性值$("input[name='newsletter']").attr("checked", true);
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [attrSel1][attrSel2][attrSelN]
操作:
CSS
属性的操作
html()
text()
val()
文本的操作
事件
底层一样,但是在此基础上JQuery还做了优化
- 如何使用JQuery绑定
- 当文档加载完毕后,自动执行! ###重要!
$(function(){
...
})
3. 延迟绑定:
$("ul").delegate("l1","click",funcation(){
...
})
现增加,现绑定
PS: 一定要先找到父标签,ul,相当于选择器
4. return false; 后面也就不提交了,和Dom里一样;
扩展:
$.xxx来执行, 如 $.login
form表单验证
Ajax:
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出
大白话:偷偷发请求
执行JQuery:
JQuery.xxx
$.xxx
JQuery的循环
.each()