jQuery篇

骑猪看日落 2022-02-23 03:22 196阅读 0赞

#### jQuery篇 ####

1.jQuery是JS的工具库，通过封装原生的JS方法，简化JS操作

功能和优势：

1.  简化DOM操作
2.  可以直接通过选择器设置元素样式
3.  链式调用（核心）
4.  事件处理更加高效
5.  Ajax技术更加完善（网络请求）
6.  提供各种插件可供使用

2.使用

1.引入jQuery文件

2.使用工厂函数 —— $()

根据选择器获取元素节点

3.原生JS对象与jQuery对象互相转换

1. DOM 转换 jQuery对象
    使用$()包装原生DOM对象,返回jQuery对象
    eg:
    	 原生对象：var h1 = document.getElementsByTagName('h1')[0]
    	Jquery对象：var $h1 = $(h1)
    
    2.jQuery 转换 DOM 对象
    eg:
    	var h1 = $('h1')[0];

4.jquery选择器

1.  使用选择器获取jQuery对象
2.  语法： $(“选择器”)
3.  分类：
    
    1.  基础选择器
        
        1.  标签选择器：$(“div”)
        2.  id选择器：$("\#id")
        3.  类选择器：$(".className")
        4.  群组选择器：$(“selector1, selector2”)
    2.  层级选择器
        
            1. 后代选择器
               $("selector1 selector2")
               匹配后代元素
            2. 子选择器
               $("selector1 > selector2")
               匹配直接子元素
            3. 相邻兄弟选择器
               $("selector1 + selector2")
               匹配紧跟在selector1后的一个兄弟元素,且满足selector2,否则匹配失败
            4. 通用兄弟选择器
               $("selector1 ~ selector2")
               匹配selector1后面所有满足selector2的兄弟元素
    3.  过滤选择器
        
            1. :first
            	$("p:first")
            	匹配一组元素中的第一个元素
            2. :last
            	$("p:last")
            	匹配一组元素中的最后一个元素
            3. :not()
            	$(":not(selector1,selector2)")
            	否定筛选,匹配除()中列出的元素外,所有元素
            4. :odd
            	$("p:odd")
            	匹配偶数行对应的元素
            5. :even
            	$("p:even")
            	匹配奇数行对应的元素
            6. :eq(index)
            	$("p:eq(2)")
            	匹配指定下标对应的元素
            7. :lt(index)
            	匹配下标小于index的元素
            8. :gt(index)
            	匹配下标大于index的元素
        
        4.属性选择器
        
            1. [attribute]	获取属性名为attribute的元素
            	$("[id]") 包含id属性的元素
            
            2. [attribute=value]  获取属性名等于attribute,属性值为value的元素
            	$("[id=d1]")
            
            3. [attribute!=value]   匹配属性值不等于value的元素
            
            4. [attribute^=value]   匹配属性值以value开头的元素
            
            5. [attribute$=value]   匹配属性值以value结尾的元素
            
            6. [attribute*=value]   匹配属性值中包含value的元素
        
        5.子元素过滤选择器
        
            1. :first-child    匹配属于其父元素中的第一个子元素
            	$("p:first-child")
            
            2. :last-child    匹配属于其父元素中的最后一个子元素
            
            3. :nth-child(n)   匹配属于其父元素中的第n个子元素

5.jquery样式操作

1. 基本操作(标签内容的操作)
        1. html("")
        为元素设置标签内容,可以识别标签,等价于原生的innerHTML
        2. text("")
        为元素设置文本内容,不能识别标签,等价于原生的innerText
        3. val()
        用来设置或读取文本框或表单控件的值
    	4. attr()
    	设置或读取指定的标签属性
    	eg: $("div").attr("id","d1");
    	5. removeAttr("")
    	移除指定的属性,参数为属性名
    
    2.样式操作
    	1.添加样式
    	$("div").attr("id","d1")  # 添加id
    	$("div").attr("class","c1")  #添加class
    
    	2.针对类选择器
    	$("div").addClass("c1").addClass("c2")  可以多次调用，或连缀调用
    	$("div").removeClass("c2") 移除指定的类名
    	$("div").toggleClass("c2")  动态切换选择器的样式，存在则删除,不存在则添加
    	
    	3.直接加css样式
    	$("h1").css("color","red").css("background","green"); 	#连续调用
    	$("div").css({
    		"width":"200px",
    		"height":"200px",
    		"text-align":"center",
    	});
    	** css样式可用json的格式表示，由属性和值组成

6.jquery节点的层次方法

根据层级关系获取节点对象

1. children() / children("selector")
    获取当前节点下所有的直接子元素,或者获取当前节点下,满足选择器的所有直接子元素
    
    2. parent()
    获取当前节点的父元素
    
    3. parents("selecor")
    获取父元素及祖先元素,或者获取指定选择器的祖先元素
    
    4. find("selector")
    必须指定选择器参数,获取包含直接和间接的所有后代元素
    
    5. next() / next("selector")
    获取下一个兄弟元素 / 指定选择器的兄弟元素
    
    6. prev() / prev("selector")
    获取上一个兄弟元素 / 指定选择器的兄弟元素
    
    7. siblings() / siblings("selector")
    获取所有的兄弟元素 / 满足选择器的所有兄弟元素

7.节点操作（创建，添加，删除）

1.创建节点：$("标签语法")
    var $h1 = $("<h1 id='d1' class='c1'>一级标题</h1>");
    # 添加样式
    $h1.css({"backgroud-color":"red","font-size":"20px"})
    
    2.添加节点
    	1.内部添加
    	$div.append($p)  将$p作为$div的最后一个子元素添加
    	$div.prepend($p)  将$p作为$div的第一个子元素添加
    	2.外部添加
    	$div.after($p)  将$p作为$div后一个兄弟元素添加
    	$div.before($p)  将$p作为$div前一个兄弟元素添加
    
    3.删除节点
    	$obj.remove()  删除节点

8.事件处理

1. 等待文档加载完毕 (onload)
    原生：window.onload = function (){};
    jQuery:
    	1.$(document).ready(function (){});
    	2.$().ready(function (){});
    	3.$(function (){});
    
    区别：1. 原生onload事件函数不能重复调用,重复书写,后面的代码会将前面的onload覆盖掉
    	 2.jQuery中优化了ready方法,可以重复使用,不会产生覆盖问题,所有的代码都会执行
    
    2.绑定事件
    原生：div.onclick = function (){};
    jQuery：
    	1.$div.click(function (){});
    	** 事件函数名省略 on 前缀
    	2.$div.bind("click",function (){});
    	** bind()方法底层实现是：
    	$div.on("click",function (){});
    
    3.事件对象
    	获取方式及相关属性，同原生的JS。浏览器自动将事件对象以参数形式传递给函数中
    	$div.click(function (evt){
    		console.log(evt);
    	});
    事件对象的常用属性：
    	1.target  获取当前事件的触发元素
    	2.鼠标事件对象
    	  1. offsetX offsetY   鼠标在元素内部的坐标位置
    	  2. clientX clientY  网页中的坐标位置
    	  3. screenX screenY  屏幕坐标系中的位置
    	3.键盘事件
    	  1.onkeydown  通过which属性获取当前按键字符对应的ASC码值，不区分大小写，统一返回       大写字母的码值
    	  2.onkeypress  通过which属性获取当前按键字符对应的ASC码值，区分大小写
    	  3.key属性  返回当前键位表示的字符