本文介绍了jQuery的基本使用方法，包括引入文件、入口函数及功能实现等关键步骤，并详细讲解了ID选择器、类选择器等多种选择器的使用技巧。
1.jquery
<!DOCTYPE html>
<html
lang="en"
xmlns="http://www.w3.org/1999/html">
<head>
<meta
charset="UTF-8">
<title>Title</title>
<style>
div{
height:
200px;
margin-bottom:
10px;
background-color:
#a43035;
display:
none;
}
</style>
<!--1.需要引入jQuery文件-->
<script
src="jquery-3.2.1.js"></script>
<script>
//2.入口函数
$(document).ready(function(){
//注册事件
$("#btn1").click(function(){
$("div").show(1000);
});
$("#btn2").click(function
() {
$("div").text("我是内容");
});
});
</script>
</head>
<body>
<input
type="button"
value="展示"
id="btn1">
<input
type="button"
value="设置内容"
id="btn2">
<div></div>
<div></div>
<div></div>
</body>
</html>
2. juery的版本
1. x兼容ie5678浏览器(推荐)
2. x不兼容ie5678浏览器
3. x不兼容ie5678浏览器,而且更加精简（国内主要用于兼容IE678）
分开发版本和生产版本
3.juery的入口函数。
（1）使用jquery的三个步骤
1. 引入jquery文件
2. 入口函数
3. 功能实现
（2）关于jquery的入口函数
//第一种写法
$(document).ready(function()){
});
//第二种写法
$(function(){
});
注：jquery入口函数与js入口函数对比
1. js要等待所有资源（包括图片、文件）加载完才加载。
2. Jquery只要等到文档树加载完成就开始执行了，并不会等待图片的加载（快！）
4. jquery对象与DOM对象的区别（重点）：
1. DOM对象：使用javascript中的方法获取页面中的元素返回的对象就是dom对象。
2. Jquery对象：jquery对象就是使用Jquery的方法获取页面中的元素返回的对象就是Jquery对象。
3. Jquery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与juery对象的方法不能混用。
DOM对象转换成jquery对象。打个比方就像机洗衣服。
Var $obj=$(domObj);
//$(document).ready(function(){});//就是典型的DOM对象转jQuery对象
jquery对象转换成DOM对象
//第一种方法（推荐）
Var $li=$(“li”);
//第二种方法
$li.get(0)
二．选择器
1. 什么是jQuery选择器？
jQuery选择器是Jquery为我们提供的一组方法，让我们能够更加方便的获取到页面中的元素
2. 基本选择器
ID选择器 $(“#id”); 用于获取指定id的元素
类选择器 $(“class”);
标签选择器 $(“div”);
并集选择器 $(“div,p,li”); 用逗号隔开的标签
交集选择器 $(“div.redClass”);
3. 层级选择器
子代（儿子）选择器 $(“ul>li”) 使用>号，获取次一级元素
后代选择器 $(“ul li”) 用空格隔开 获取所有ul下的所有元素。
4. 过滤选择器
：eq(index) $(“li.eq(2)”).css(“color”,”red”) 获取(索引号）下标等于index的元素，索引号从0开始
：lt(index) 获取(索引号）下标小于index的元素
:gt(index) 获取(索引号）下标 大于index的元素
：odd 选择下标为奇数
：even 选择下标为偶数
5. 筛选选择器（方法）
与过滤选择器相似，但用法不同，主要体现方法。
Children(selector) $(“ul”).children(“li”) 相当于子代选择器。
扫一扫
1282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
