jQuery基础

# jQuery基础

JavaScript 库：是封装好的特定的集合（方法和函数）

jQuery 是一个快速、简洁的 JavaScript 库，提倡写更少的代码完成更多的事

jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互

轻量级
跨浏览器兼容
链式编程、隐式迭代
支持插件扩展开发

# 基本概念

$ 是 jQuery的别称

$ 也是jQuery的顶级对象

# jQuery对象和DOM对象

用原生 js 获取过来的对象就是 DOM 对象
用jquery方法获取过来的就是 jQuery 对象（伪数组）

DOM 对象与 jQuery 对象之间可以相互转换

DOM对象转换为jquery对象

$('div')

jQuery对象转换为DOM对象

$('div')[index]
$('div').get(index)

1
2

# 基本使用

<script src="URL"/>
<html>
	$(function(){
		//此函数是页面 DOM 加载完成的入口
	})
	$(document).ready(funtion(){
		//此函数是页面 DOM 加载完成的入口
	})
</html>

1
2
3
4
5
6
7
8
9

# 入口函数

$(function(){
		//此函数是页面 DOM 加载完成的入口
})
$(document).ready(funtion(){
		//此函数是页面 DOM 加载完成的入口
})

1
2
3
4
5
6

# 选择器

$("选择器") //选择器直接写 CSS 选择器

名称	用法	描述
ID选择器	$("#id")
全选选择器	$("*")
类选择器	$(".class")
标签选择器	$("div")
并集选择器	$("div,p")
交集选择器	$("li.current")

与 css选择器完全一致

# jQuery的隐式迭代

var lines = document.querySelector('li');
// DOM 元素仅将一个元素修改了css样式
lines.style.backgroundColor = "red";
// jquery 对象将所有匹配的元素进行了css样式修改
$('li').css('background', 'red');

1
2
3
4
5

把匹配的所有元素内部进行便利循环，给没一个元素添加css方法

# 筛选选择器

语法	用法	描述
:frist	$("li:first")	获取第一个 li 元素
:last	$("li:last")	获取最后一个 li 元素
:eq(index)	$("li:eq(2)")	获取到 li 元素中，选择索引号为2的元素，index从0开始
:odd	$("li:odd")	获取到 li 元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到 li 元素中，选择索引号为偶数的元素

方法

语法	用法	说明
parent()	$("li").parent();	查找父级
children(selector)	$("ul").parent("li");	最近一级子级
find(selector)	$("ul").find("li");	后代选择器
siblings(selector)	$(".first").siblings();	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".frist").nextAll();	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll();	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected");	检查当前的元素是否含有某个特定类，如果有就返回true
eq(index)	$("li").eq(2);	获取第index的节点元素

下拉菜单案例

 $(function() {
     $(".nav>li").mouseover(function() {
         $(this).children("ul").show();
     })
     $(".nav>li").mouseout(function() {
         $(this).children("ul").hide();
     })
 })

1
2
3
4
5
6
7
8

# jQuery排他思想

$(function(){
    $("button").click(
    	function(){
            $(this).css("background","red");
            $(this).siblings("button").css("background","");
        }
    )
})

1
2
3
4
5
6
7
8

图片切换案例

$(function() {
            $("#left li").mouseover(
                function() {
                    var index = $(this).index();
                    $("#content div").eq(index).show();
                    $("#content 				div").eq(index).siblings().hide();
                }
            )
        })

1
2
3
4
5
6
7
8
9

# 链式编程

$(function(){
    $("button").click(
    	function(){
            //$(this).css("background","red");
            //$(this).siblings("button").css("background","");
       		$(this).css("background","red").siblings().css("background","");
        }
    )
})

1
2
3
4
5
6
7
8
9

注：链式编程需要知道是对那个对象进行操作

# 修改样式 css 方法

参数只写属性名，则返回属性值
```
$(this).css("color");
//return "red"
```
1
2
参数是属性名，属性值。逗号分隔，是设置一组样式。除数字其他都要加引号
```
$(this).css("color","red");
```
1

参数可以是对象形式，方便设置多组样式

$(this).css({
    "color":"red",
    "font-size":"20px",
    width:500,
    height:500
})

1
2
3
4
5
6

# 类名操作

添加类
```
$("div").addClass("current");
```
1
删除类
```
$("div").removeClass("current");
```
1
切换类
```
$("div").toggleClass("current");
```
1

类操作和className的区别

原生 js 中 className 会覆盖原先里面的类名

jquery里面类操作只是对指定类进行操作，不影响原先的类名

编辑

上次更新: 2023/02/07, 14:51:48

← WebSocket 环境搭建→