JQuery

1. Jquery 介绍

image.png


jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，"如虎添翼"


同时网 络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so easy。" --因为我们已经站在巨人的肩膀上了


jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手 加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个 访问最多的网站中，有超过 55%在使用 jQuery


Jquery优点

  1. 轻量级。核心文件才几十 kb ，不会影响页面加载速度。

  2. 跨浏览器兼容，基本兼容了现在主流的浏览器。

  3. 链式编程、隐式迭代。

  4. 对事件、样式、动画支持，大大简化了 DOM 操作。

  5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。

  6. 免费、开源。

2. Jquery下载

image.png

  • 下载地址

http://jquery.com/

  • 下载步骤

  1. 进入下载地址，点击Download jQuery

image.png

  1. 点击图片指引处（开发版本）

image.png

  1. 跳转到此页面后，按住 Ctrl + S 进行保存，保存的文件就是Jquery文件

image.png

  1. 将此文件放置需要使用Jquery的位置即可

image.png

3. Jquery引入

Jquery的引入需要通过script标签的src属性进行引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 通过 script标签引入Jquery外部文件 -->
		<script src="Jquery/jquery-3.7.1.js"></script>
	</body>
</html>

4. Jquery对象转换

  • Jquery核心

`$` 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery 提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$ <==> jQuery

  • Dom对象 与 Jquery包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法 和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象， 只有jQuery对象才能使用jQuery提供的方法

  • Dom对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:
var div = document.getElementById("testDiv"); 
var divs = document.getElementsByTagName("div");

  • Jquery包装集对象

可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比 如获取包含一个元素的 jQuery 包装集：
var jQueryObject = $("#testDiv");

  • Dom对象 转 Jquery对象

let domDiv = document.getElementById('mydiv');  // 获取Dom对象
let mydiv = $(domDiv);			// Dom对象加上$则变为Jquery对象

  • Jquery对象 转 Dom对象

let jqueryDiv = $('#mydiv'); 	// 获取jQuery对象 
let dom = jqueryDiv[0]; 		// 将以获取的jquery对象转为dom

//通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象
$('#mydiv').each(function() {       
    var jquery = $(this); 
});

5. Jquery基础选择器

​ 和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定 位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一 个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装 集的形式返回


​ jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用 到再查阅。

基础选择器

  • 基础选择器

image.png

<script>
    // id选择器---选择id为mydiv1的元素
    let d1 = $('#mydiv1')

	// 标签选择器---选择标签为p的元素
	let p1 = $('p')
	
	// 类选择器---选择class为blue的元素
    let d2 = $('.blue')

	// 通用选择器---选择所有元素
    let all = $('*')

	// 组合选择器---选择所有span 和 所有id为mydiv1的元素
    let d3 = $('span, #mydiv1')

6. Jquery层次选择器

image.png


示例代码：

<script>
    // 后代选择器-----选择所有后代
    // id为parent下面所有的div
    let h1 = $('#parent div')
    console.log(h1);

    // 子代选择器-----选择儿子辈
    // id为parent下面的所有子div
    let z1 = $('#parent > div')
    console.log(z1);

    // 相邻选择器-----选择相邻元素
    // 类为gray相邻的img元素
    let x1 = $('.gray + img')
    console.log(x1);

    // 同辈选择器
    // 类为gray同级别的img元素
    let t1 = $('.gray ~ img')
    console.log(t1);
</script>

7. Jquery表单选择器

image.png


示例代码：

<!-- 	表单选择器 :input
        查找所有的input元素：$(":input")；
        注意：会匹配所有的input、textarea、select和button元素。
        文本框选择器 :text 查找所有文本框：$(":text")
        密码框选择器 :password 查找所有密码框：$(":password")
        单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
        复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
        提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
        图像域选择器 :image 查找所有图像域：$(":image")
        重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
        按钮选择器 :button 查找所有按钮：$(":button")
        文件域选择器 :file 查找所有文件域：$(":file") 
-->
<script>
    console.log($(':password'));
    console.log("password-->" + $(':password').length);

    console.log($(':button'));
    console.log("button-->" + $(':button').length);
</script>