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”) 相当于子代选择器。