JQuery开发手册
Posted 野生java研究僧
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery开发手册相关的知识，希望对你有一定的参考价值。
JQuery开发文档
1. jQuery简介
1.1jQuery简介
jQuery 是一个高效、精简并且功能丰富的 javascript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 html 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：写的更少，做得更多！
1.2 jQuery官网
官方地址：https://jquery.com/
官方文档：https://api.jquery.com/
1.3、jQuery版本介绍
- 1.x
兼容老版本IE
文件较大，但兼容性最好 - 2.x
部分IE8及以下版本不支持
文件较小，执行效率更高 - 3.x
完全不再支持IE8及以下版本
提供了一些新的API
提供不包含AJAX/动画API的版本
1.4 Query引入方式
- 本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用
<head>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
JQuery 页面加载完成后执行事件
// 方式1
$(document).ready(function()
//code
)
// 方式2
jQuery(document).ready(function()
//code
)
// 方式3
window.οnlοad=function()
//code
1.5 JQuery快速使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="app">
hello world
</div>
</body>
<script type="text/javascript">
// code
$(function()
$("#app").css("color":"red")
)
</script>
</html>
1.6 jQuery两把利器
jQuery两把利器分别是：
- jQuery核心函数：即： $() 或 jQuery()，jQuery定义了这个全局的函数供我们调用，它既可作为一般函数调用，且传递的参数类型不同/格式不同，功能就完全不同，也可作为对象调用其定义好的方法，此时 $ 就是一个工具对象。
- jQuery核心对象：即执行jQuery核心函数返回的对象，jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)，jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom，调用jQuery对象的任何方法后返回的还是当前jQuery对象。
1.7 html字符串转为Jquery或Dom对象
1、原html字符串如下：
var htmlText = '<div id="demo"><span class="sonSpan"></span></div>'；
2、下面使用Jquery库将htmlText 字符串变量转为Jquery对象。
// 就是htmlText 字符串转为了一个Jquery对象
$(htmlText)
3、将该Jquery对象返回元素内容：
console.log($(htmlText).html())
输出：
<span class="sonSpan"></span>
说明了：$(htmlText)Jquery对象代表的是最外层的html元素div。
4、将Jquery对象和DOM对象之间互转，代码如下：
var element= $(htmlText).get(0) //element就是一个dom对象
var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。
2.JQuery核心函数
2.1 选择器
2.1.1 id选择器
id选择器： 根据id选择元素
需求选中id为app的元素并且为其添加红色字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="app">
hello world
</div>
<div id="content">
hello world
</div>
</body>
<script type="text/javascript">
// code
$(function()
$("#app").css("color":"red")
)
</script>
</html>
2.1.2 标签选择器
标签选择器：根据标签名称选择元素
需求：选中所有的div元素，为其添加红色字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="app">
hello world1
</div>
<div id="content">
hello world2
</div>
<p>hello world3</p>
</body>
<script type="text/javascript">
// code
$(function()
$("div").css("color":"red")
)
</script>
</html>
2.1.3 class选择器
class选择器：根据class选择元素
需求：选中class为content的元素，为其添加红色字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="content">
hello world1
</div>
<div class="content">
hello world2
</div>
<div class="foot">
hello world3
</div>
</body>
<script type="text/javascript">
// code
$(function()
$(".content").css("color":"red")
)
</script>
</html>
2.1.4 通配符选择器
通配符选择器： 选择页面中所有的元素
需求：给页面所有的元素都添加上绿色字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="content">
hello world1
</div>
<div class="content">
hello world2
</div>
<p> hello world3</p>
</body>
<script type="text/javascript">
// code
$(function()
$("*").css(
"color": "green"
)
)
</script>
</html>
2.1.5 并集选择器
并集选择器: 同时选择多个元素，也可以通过别的方式进行并集选择，例如id，class等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="content">
hello world1
</div>
<div class="content">
hello world2
</div>
<p> hello world3</p>
</body>
<script type="text/javascript">
// code
$(function()
$("div,p").css(
"color": "red"
)
)
</script>
</html>
2.1.6 交集选择器
交集选择器：从多个元素中，选择有共同特点的元素
需求：选择div中.class为app的所有元素，添加红色字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="app">
hello world1
</div>
<div class="app">
hello world2
</div>
<p> hello world3</p>
<div class="content">
hello world2
</div>
</body>
<script type="text/javascript">
// code
$(function()
// 如果选择的是id 就是：$("div#app")
$("div.app").css(
"color": "red"
)
)
</script>
</html>
2.1.7 子代选择器
子代选择器：选择元素后面的子元素，必须是紧挨着父元素的子元素，不能是孙子元素
需求：选中ul 所有的p元素，字体设置为红色，li里面的p元素没有被选中，因为他不是ul元素的亲儿子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
<li><p>hello world1</p></li>
<li><p>hello world2</p></li>
<li><p>hello world3</p></li>
<p>hello world4</p>
</ul>
</body>
<script type="text/javascript">
// code
$(function()
$("ul>p").css(
"color": "red"
)
)
</script>
</html>
2.1.8 后代选择器
后代选择器：选中指定元素中的所有子元素，可以是深层嵌套，不像是子代选择器，只能选中亲儿子，后代选择器可以是孙子元素，以及更深层次的嵌套。
需求：选中ul中素有的p元素，为其设置红色字体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
<li><p>hello world1</p></li>
<li><p>hello world2</p></li>
<li><p>hello world3</p></li>
<p>hello world4</p>
</ul>
</body>
<script type="text/javascript">
// code
$(function()
$("ul p").css(
"color": "red"
)
)
</script>
</html>
2.1.9 兄弟选择器
兄弟选择器：选中指定元素后的兄弟元素，必须紧挨着的，中间隔一个元素都不行
需求：选中ul中的li元素的兄弟元素p，为其设置红色字体
<!DOCTYPE html>
<htmljQuery中的筛选选择器
BackgroundWorker：Argument-Object 的子代