Jquery
一、JQuery简介
jQuery 是一个 JavaScript 库,是目前使用最广泛的前端框架。
jQuery 极大地简化了 JavaScript 编程。
JQuery基于javascript编程,可以完成大部分javscript的可以解决的问题,而且比javascript更精简,使用更加方便,开发更加快捷,这也是JQuery使用广泛的原因之一。
二、为项目提供JQuery的运行环境
1.在线加载jquery.js,为项目提供运行环境。
使用一些其他公司提供的cdn路径,我们理解为大型公司提供的js文件在线路径。因为大型公司使用jq.js后在本地缓存。
2.下载到本地之后,我们离线加载jqury.js
三、JQuery语法
基本语法:基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
简单的实例
<html>
<head>
<title>Jquery</title>
<!-- 引用下载到本地的jquery.js文件-->
<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<script type="text/javascript">
<!--js代码-->
<!--ready方法:在文档王完全加载之后调用jquery代码-->
$(document).ready(function(){
<!--获取id为div1的元素,并令其隐藏-->
$('#div1').hide();
});
</script>
<body>
<!--一个id为div1的div标签-->
<div id="div1">
我被隐藏了!
</div>
</body>
</html>
四、CSS选择器
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中:
选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。
1.元素选择器
$(“div”) 选取div标签的元素
2.属性选择器
(“[href]”)选取所有带有href属性的元素。 (“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素。
(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。("[href$=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。
3.CSS选择器
(“.class”)选取所有class=”class”的元素 (“.class1.class2”) 选取所有class=”class1”且class=”class2”的元素
4.后代选择器
(“divh4”)获取所有div标签下的h4标签元素 (“#div1 .class1”) 获取所有id为div1的元素下的class=”class1”的元素
5.子元素选择器
$(“div > h4”) 获取所有div标签元素的h4标签子元素,如果div标签中有两个h4元素,则只会获取第一个h4标签元素
6.相邻兄弟选择器
$(“div+h4 “) 获取紧跟在div标签元素后面出现的h4元素
7.伪类
8.伪元素
五、JQuery事件