Jqury

Jquery

1.概念

jquery是一个前端的JavaScript框架，用于简化JavaScript代码。

使用更少的代码实现更多的效果。

需要在Html页面中引入Jquery的js文件

需要在页面中引入Jquery的js文件

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
​
$(function(){
        具体实现                
})

核心函数

$( )顶级对象

• 传入function：相当于window.onload = function(){}

• 传入HTML：创建对应HTML

• 传入选择器：$("#id 属性"); $("标签名"): $(".class属性值")

• 传入DOM：转化为jquery对象（本质为DOM对象数组与其他功能）：

  • jquery API创建的对象

  • jquery包装的DOM对象

  • jquery API查询到的对象

jquery对象转为DOM对象：取下标

 

2.选择器

2.1 基础选择器

基本选择器：ID选择器、class选择器、标签选择器、并集选择器、全局选择器

• ID选择器：$("#author").css("color", "red"); css():给标签设置样式

• class选择器：$(".intro").css("color", "blue");

• 标签选择器：$("dd").css("color", "pink");

• 并集选择器： $("h1,.intro,#author").css("font-size","25px");

• 全局选择器：$("*").css("font-size", "12px");

 

2.2 层次选择器

 

 

 

2.3 属性选择器

 

 

 

 

2.4 过滤选择器

 

 

 

 

 

 

基本过滤选择器

• :first：选取第一个元素（单个元素）

• :last：选取最后一个元素（单个元素）

• :eq(index）：选取索引等于index的元素（单个元素）

• :gt(index)：选取索引大于index的元素（元素集合）

• :lt(index)：选取索引小于index的元素（元素集合）

• :even：选取索引是偶数的所有元素，索引从0开始（元素集合）

• :odd：选取索引是奇数的所有元素，索引从0开始（元素集合）

• :not(selector)：去除所有与给定选择器匹配的元素（元素集合）

• :header：选取所有的标题元素（元素集合）

• :focus：选取当前获得焦点的元素（元素集合）

• :animated：选取当前正在执行动画的所有元素（元素集合）

筛选方法：

语法	用法	说明
parent()	$("li").parent()	查找父级
children(selector)	$("ul").children("li")	查找子级相当于$("ul>li")
find(selector)	$("ul").find("li")	查找后代

 

2.5 可见性选择器

 

 

 

2.6 表单选择器

 

 

 

3.操作内容

3.1 属性操作

属性操作：

html() 操作标签之间的内容 无参数为获取，有参数为设置

text() 操作标签之间的文本 无参数为获取，有参数为设置

val() 操作表单项的value值 无参数为获取，有参数为设置

attr("xxx",["value"]) 一个参数为获取，两个参数为设置 (不用于checked,readonly,slected,disabled)

prop("xxx",["value"]) 一个参数为获取，两个参数为设置

 

3.2 DOM

内部插入：

a.appendTo(b) a插入到b的最后一个子元素

a.prependTo(b) a插入到b的第一个子元素

外部插入：

a.insertAfter(b) ba

a.insertBefore(b) ab

替换：

a.replaceWith(b) 用b替换a

a.replaceAll(b) a替换全部b

删除：

a.remove() 删除a

a.empty() 情况a的内容

 

3.3 CSS操作

addClass() 添加样式

removeClass() 删除样式

toggleClass() 有则删除无则添加

offset() 获取设置坐标

 

3.4 动画操作

show() 显示

hide() 隐藏

toggle() 有则隐藏无则显示

参数：时长、回调

fadein() 淡入

fadeOut() 淡出

fadeTo()

fadeToggle()

3.5 事件处理

click() 单击

mouseover() 鼠标移入

mouseout() 鼠标移出

bind() 绑定事件

on绑定事件：$(".on").on("mouseover", function() { ​ $(".on .topDown").show(); ​ });

one() 绑定只响应一次

live() 绑定选择器匹配的所有元素的事件，包含之后动态创建的

unbind() 解除绑定

事件冒泡：

父子元素监听同一事件，子元素触发时事件会传到父级响应

在子元素事件函数中 return false即可阻止事件冒泡

事件对象：function(event) 获取事件对象

type 判断事件类型