一、什么是jQuery?
1、jQuery特点
轻量级:封装后的库只有不到100k,下载的时候很快
强大选择器:方便快速查找DOM元素
隐式遍历(迭代):一次操作多个元素
读写合一:读数据/写数据用的是一个函数
链式调用:可以通过.不断调用jQuery对象的方法事件处理
DOM操作(CUD)·样式操作
动画
浏览器兼容丰富的插件支持
2、如何使用jQuery
- 引入jQuery文件
- 入口函数
- 功能实现
jQuery的入口函数:
<script>
// $相当与jQuery
// 第一种写法
$(document).ready(function(){
});
// 第二种写法
$().ready(function(){
});
// 第三种写法
$(function(){
// 编写功能代码实现
});
</script>
jQuery入口函数与js入口函数的对比:
- JavaScript的入口函数要等到页面中的所有资源(包括图片、文件)加载完成才开始执行。
- jQuery的入口函数只会等待文档加载完成就开始执行,并不会等待图片,文件的加载
二、基本选择器的使用
1、基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id"); | 获取指定ID的元素 |
类选择器 | $(".classname"); | 获取同一类class的元素 |
标签选择器 | $("div"); | 获取同一类标签的所有元素 |
并集选择器 | $("div,p,span"); | 使用逗号分隔,只要符合条件之一就可 |
交集选择器 | $("div.list"); | 获取class为list的div元素 |
//jquery如何设置样式
//css(name,value)
//name:属性名 value:属性值
//id选择器
$("#one").css("background", "brown");
//class选择器
$(".two").css("background" , "green");
//标签选择器
$("li").css("border" , "5px solid #fff");
//并集选择器
$ ("div,p").css("background" , "red");
//交集选择器
$("div.box" ).css("background" , "#orange");
案例效果图: