学习的第九天

最新推荐文章于 2021-11-30 22:27:10 发布

zxc1006183503

最新推荐文章于 2021-11-30 22:27:10 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/zxc1006183503/article/details/99670300

版权

本文详细介绍jQuery框架的概念、快速入门、与JavaScript对象的区别及转换方法。涵盖选择器的多种类型，如基本、层级、属性、过滤和表单过滤选择器。深入探讨DOM操作，包括内容、属性操作和元素的CRUD操作。

摘要由CSDN通过智能技术生成

今日内容

	1. 概念
	2. 快速入门
	3. JQuery对象和JS对象区别与转换
	4. 选择器
	5. DOM操作
	6. 案例

回顾

DOM

w3c分作三个标准

核心DOM

HTML DOM

XML DOM

Node节点

Element 元素

Text 文本对象

Attribute 属性对象

Comment 注释对象

Doucument 文档对象

JQuery 基础：

1. 概念： 
	jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
	jquery，也就是js框架，本质就是一些js文件，封装了js的原生代码

2. 快速入门
	1.jquery的下载
		目前有三大版本
				1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
					 功能不再新增。因此一般项目来说，使用1.x版本就可以了，
					 最终版本：1.12.4 (2016年5月20日)
				2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
					 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
					 最终版本：2.2.4 (2016年5月20日)
				3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
					 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
					 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
	jquery-1.4.2.js与jquery-1.4.2.min.js的区别
	jquery-xxx.js	开发版本，给我们程序员看的，有良好的缩进和换行，
	jquery-xxx.min.js	生产版本，在程序中使用，没有缩进，优点是体积小，加载更快捷
	2.导入js，也就是导入jquery文件
	3.开始使用
		$("").html() = 元素.innerHTML；

3. JQuery对象和JS对象区别与转换
	1.jq对象在操作的时候，更加方便
	2.jq和js在很很多方法上是不相同的
	
	两者怎么互相转换
		jq--->js	jq对象[索引] 或者	jq对象.get（索引）
		js--->jq	$(js对象)
		
4.入口函数
	jq
        $(function() {

        });
    js
    	window.onoload = function(){
    	
    	}
    js只能定义一次，如果定义多次，后边的会将前面的覆盖掉
    $(funciton(){})	可以定义多次
    
5.样式控制控制
	div1.css("backgroundColor","red");
	
6.事件的绑定
	div1.click(function()

4. 选择器：筛选具有相似特征的元素

	1. 分类
		1. 基本选择器
			1. 标签选择器（元素选择器）
				* 语法： $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器：
				* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
		2. 层级选择器
			1. 后代选择器
				* 语法： $("A B ") 选择A元素内部的所有B元素		
			2. 子选择器
				* 语法： $("A > B") 选择A元素内部的所有B子元素
		3. 属性选择器
			1. 属性名称选择器 
				* 语法： $("A[属性名]") 包含指定属性的选择器
			2. 属性选择器
				* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
			3. 复合属性选择器
				* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
		4. 过滤选择器
			1. 首元素选择器 
				* 语法： :first 获得选择的元素中的第一个元素
			2. 尾元素选择器 
				* 语法： :last 获得选择的元素中的最后一个元素
			3. 非元素选择器
				* 语法： :not(selector) 不包括指定内容的元素
			4. 偶数选择器
				* 语法： :even 偶数，从 0 开始计数
			5. 奇数选择器
				* 语法： :odd 奇数，从 0 开始计数
			6. 等于索引选择器
				* 语法： :eq(index) 指定索引元素
			7. 大于索引选择器 
				* 语法： :gt(index) 大于指定索引元素
			8. 小于索引选择器 
				* 语法： :lt(index) 小于指定索引元素
			9. 标题选择器
				* 语法： :header 获得标题（h1~h6）元素，固定写法
		5. 表单过滤选择器
			1. 可用元素选择器 
				* 语法： :enabled 获得可用元素
			2. 不可用元素选择器 
				* 语法： :disabled 获得不可用元素
			3. 选中选择器 
				* 语法： :checked 获得单选/复选框选中的元素
			4. 选中选择器 
				* 语法： :selected 获得下拉框选中的元素

5. DOM操作
	1. 内容操作	
		html()  innerHTML	获取/设置(在函数里面写参数)标签体内容
		text()	获取/设置标签的纯文本内容
		val()	获取/设置标签的属性值
	2. 属性操作
		1.通用属性
			attr()
			remoceAttr()
			prop()	与attr一样，但是有区别
			removeProp()
			* attr 和 prop 区别？ 
			1. 如果操作的是元素的固有属性，则建议使用 prop 
			2. 如果操作的是元素自定义的属性，则建议使用 attr 
		2. 对 class 属性操作 
			1. addClass():添加 class 属性值 
			2. removeClass():删除 class 属性值 
			3. toggleClass():切换 class 属性 * toggleClass("one"):  
				* 判断如果元素对象上存在 class="one"，则将属性值 one 删除掉。 如果元素对象上不 存在 				class="one"，则添加 
		3. css(): 
			
	3. CRUD 操作: 
		1. append():父元素将子元素追加到末尾 * 对象 
			1.append(对象 2): 将对象 2 添加到对象 1 元素内部，并且在末尾
        2. prepend():父元素将子元素追加到开头 * 对象 
        	1.prepend(对象 2):将对象 2 添加到对象 1 元素内部，并且在开头 
        3. appendTo(): * 对象 
        	1.appendTo(对象 2):将对象 1 添加到对象 2 内部，并且在末尾 
        4. prependTo()： * 对象 
        	1.prependTo(对象 2):将对象 1 添加到对象 2 内部，并且在开头 
		5. after():添加元素到元素后边 * 对象 
			1.after(对象 2)： 将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关系
        6. before():添加元素到元素前边 * 对象 
        	1.before(对象 2)： 将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟关系 
        7. insertAfter() * 对象
        	1.insertAfter(对象 2)：将对象 2 添加到对象 1 后边。对象 1 和对象 2 是兄弟关 系 
        8. insertBefore() * 对象 
        	1.insertBefore(对象 2)： 将对象 2 添加到对象 1 前边。对象 1 和对象 2 是兄弟 关系 
 
		9. remove():移除元素 * 对象.remove():将对象删除掉 
		10. empty():清空元素的所有后代元素。 
			* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点