jQuery基础

目录

一.jQuery 的基本使用

1.1jQuery 的入口函数

1.2jQuery 对象和 DOM 对象

二.jQuery 选择器

2.1jQuery 基础选择器

2.2jQuery 层级选择器 

​编辑 2.3隐式迭代（重要）

 2.4jQuery 筛选选择器

2.5jQuery 筛选方法（重点） 

2.6jQuery 里面的排他思想 

三.jQuery 样式操作

3.1  操作 css 方法

3.2设置类样式方法 

四.jQuery 效果

4.1  显示隐藏效果

4.2滑动效果

4.3  事件切换

4.4  动画队列及其停止排队方法 

4.5  淡入淡出效果 

4.6  自定义动画 animate

五. jQuery 属性操作 

5.1  设置或获取元素固有属性值 prop()

 5.2  设置或获取元素自定义属性值 attr()

5.3  数据缓存 data() 

六. jQuery 内容文本值

七. jQuery 元素操作

7.1 遍历元素

7.2 创建元素

 7.3 添加元素

八. jQuery 尺寸、位置操作

8.1  jQuery 尺寸

8.2  jQuery 位置

九.jQuery 事件注册 

9.1单个事件注册

9.2 事件处理 off() 解绑事件 

9.3 自动触发事件 trigger()  

十. jQuery 事件对象 

十一.jQuery 对象拷贝

---

 

一.jQuery 的基本使用

1.1jQuery 的入口函数

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;

1. 等着 DOM 结构渲染完毕即可执行内部代码 ，不必等到所有外部资源加载完成， jQuery 帮 我们完成了 封装。

2. 相当于原生 js 中的 DOMContentLoaded。

3. 不同于原 生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码 。

• $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
• $ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

1.2jQuery 对象和 DOM 对象

1.DOM 对象转换为 jQuery 对象： $(DOM对象) 

$('div')         

2. jQuery 对象转换为 DOM 对象（两种方式）

$('div') [index]       index 是索引号           

$('div') .get(index)    index 是索引号      

二.jQuery 选择器

2.1jQuery 基础选择器

$(“选择器”)   //  里面选择器直接写 CSS 选择器即可，但是要加引号      

2.2jQuery 层级选择器 

 2.3隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

 2.4jQuery 筛选选择器

2.5jQuery 筛选方法（重点） 

2.6jQuery 里面的排他思想 

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

三.jQuery 样式操作

3.1  操作 css 方法

1. 参数只写属性名，则是返回属性值

$(this).css(''color'');

2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(''color'', ''red'');

3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

$(this).css({ "color":"white","font-size":"20px"});

3.2设置类样式方法 

 1. 添加类

$(“div”).addClass(''current'');

2.  移除类

$(“div”).removeClass(''current'');

3.  切换类