jQuery学习总结1

短命女 2022-06-05 06:52 224阅读 0赞

**一、下载集CDN引入**

**1.1、官方下载**

地址：[http://jQuery.com/download/][http_jQuery.com_download]

jq自2.0版本开始，不再支持IE9一下浏览器；自3.0版本开始，针对移动端做了优化处理；

![Center][]

引入

**1.2、CDN加速**

如果将我们的代码放在各大城市，根据用户所在地去距离用户最近的地方下载，那么我们网站的打开速度将会大大提升，这就是所谓的CDN加速的基本原理；

http://www.bootcdn.cn

http://cdn.code.baidu.com

引入

**1.3、手册**

在线手册   [ http://www.jb51.net/shouce/jQuery1.82/][http_www.jb51.net_shouce_jQuery1.82]

手册下载    http://www.php.cn/xiazai/shouce/14

**二、jQuery中的选择器**

定义：获取元素的各种方式，我们统称为选择器，使用方式$(‘选择器’)

**2.1基本**

\#id                                            //id

element                                       //标签

.class                                          //类名

\*                                             //全选包含body

selector1,selector2,selectorN                      //多选

**2.2层级**

ancestor descendant                            //祖先 后代

parent > child                                  //父>子

prev + next                                   //兄+弟，紧邻的一个

prev ~ siblings                                 //兄~弟，之后所有的

**2.3简单**

:first                                          //兄弟，第一个

:last                                          //最后一个

:not(selector)                                  //除了（）之外

:even                                         //偶数，从0开始

:odd                                          //奇数，

:eq(index)                                     //相等，从0开始

:gt(index)                                      //大于

:lt(index)                                       //小于

:header                                        //匹配h1-h6标题

:animated                        //所有正在执行动画效果的元素

:focus                                           //获得焦点的

**2.4内容**

:contains(text)                               //包含给定文本的元素

:empty                                     //空

:has(selector)                                //如：`$("div:has(p)")`

:parent                                //含有子元素或者文本的元素

**2.5可见性**

:hidden                 //所有不可见元素，或者type为hidden的元素

:visible                                     //所有的可见元素

**2.6属性**

\[attribute\]                               //包含给定属性的元素

\[attribute=value\]                      //如：$("input\[class='red'\]").

\[attribute!=value\]                     //不含有指定的属性

\[attribute^=value\]                    //属性名以某些值开始

\[attribute$=value\]                     //属性名以某些值结束

\[attribute\*=value\]                    //属性是以包含某些值的元素

\[attrSel1\]\[attrSel2\]\[attrSelN\]             //需要同时满足多个条件

**2.7子元素**

:nth-child                    //如：$("ulli:nth-child(2)")，从1开始

:first-child                                        //第一个

:last-child                                        //最后一个

:only-child                             //是父元素中唯一的子元素

**2.8表单**

:input                                    //input标签

:text                                     //Type类型为text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden               //所有不可见元素，或者type为hidden的元素

**2.9表单对象属性**

:enabled                                       //所有可用元素

:disabled                                      //所有不可用元素

:checked                           //所有选中的，单选框，复选框

:selected                              //所有选中的option元素，下拉

**三、属性操作**

**3.1、基本属性**

attr(name) ： 根据属性的名称获取元素的属性值

attr(key,value) ： 设置元素的属性， key属性， value属性值

attr(properties) ： 一次为元素设置多个属性， 要求参数是一个json对象

attr(key,fn) ： 通过函数的返回值设置元素的属性

removeAttr(name) ： 移除元素的属性

**3.2、class属性**

addClass(class)：为元素添加class属性

removeClass(class)：移除元素的class属性

toggleClass(class)：切换元素的class属性，如果有就移除，没有就添加

hasClass(class)：判断元素是否具有某个class属性

**3.3、css样式**

css(name)：根据name获取元素的css属性值

css(name,value)：设置元素的属性值

css(properties)：一次为元素设置多个属性值，要求参数是一个json对象

**3.4 offset位置**

offset()：获取元素的横纵坐标，返回一个json对象，拥有left与top属性

offset(coordinates)：设置元素位置要求是一个json对象，必须包含left与top属性

**3.5宽高设置**

width()：获取元素的宽度

width(value)：设置元素的宽度

height()：获取元素的高度

height(value)：设置元素的高度

**3.6、表单值和文件内容**

val() ：获取表单元素的value值

val(val)：设置表单元素的value值

html() ：获取元素的内容

html(val)：设置元素的内容

text() ：获取元素的文本内容

text(val)：设置元素的文本内容

**3.7、复选框**

attr(‘checked’,true);      复选框设置为选中

attr(‘checked’,false);      复选框设置为不选中

this.checked=!this.checked         复选框设置反选

**四、jQuery对象 与 dom对象关系**

jQuery对象： $(‘\#one’)  $(‘li’)  等选择器使用返回的信息就是对象，称为“jQuery对象”

dom对象： document.getElementById()  ocument.getElementsByTagName()等返回的信息就是“dom对象”

**4.1、 jQuery对象àdom对象**

jQuery对象\[下标\]

**4.2、dom对象àjQuery对象**

$(dom对象)

**五、事件编程**

**5.1、页面加载事件**

$(document).ready(function()\{\})

$(document)是把document的dom对象变为jQuery对象

$().ready(function()\{\});

$()也是创建jQuery对象，不过内部没有dom对象的组成部分    不加载资源

$(function()\{\});

该加载事件是对第①种加载事件的封装，运行决定速度稍慢(没有第①种快)对**第一种加载**的封装而已

**5.2、 jq中的事件绑定**

原生**js**事件绑定语法：

DOM对象.on事件名称=事件的处理程序

**jq**事件绑定语法：

jq对象.事件名称(事件的处理程序);   ** 事件监听**

** **

**5.3jq中常用事件**

所有事件都是方法

blur(fn)：当失去焦点时触发

change(fn)：当状态改变时触发

click(fn)：当单击时触发

dblclick(fn)：当双击时触发

focus(fn)：当获得焦点时触发

keydown(fn)：当键盘按下时触发

keyup(fn)：当键盘弹起时触发

keypress(fn)：当键盘按下时触发

load(fn)：和ready一样都是页面载入事件

unload(fn)：当页面关闭时触发

mousedown(fn)：鼠标按下时触发

mouseup(fn)：鼠标弹起时触发

mousemove(fn)：鼠标移动时触发

mouseover(fn)：鼠标悬浮时触发

mouseout(fn)：鼠标离开时触发

resize(fn)：当窗口大小改变时触发

scroll(fn)：当滚动条滚动式触发

select(fn)：当文本框中的文本选中时触发

submit(fn)：当表单提交时触发

**5.4、事件切换**

**hover(fn1,fn2)**：

当鼠标移动到一个匹配的元素上面时， 会触发指定的第一个函数。

当鼠标移出这个元素时， 会触发指定的第二个函数。

**toggle(fn1,fn2,fn3...**，**fnN)**：

点击切换事件，第一次点击执行fn1,第二次点击执行fn2,第三次点击执行fn3，当所有函数执行完后再点击，则再次从第一个开始执行；

**5.5、事件处理**

**one('**事件**1**事件**2**事件**N',fun)**：

为选中元素绑定一次性事件(多个事件用空格隔开)；

**bind('**事件**1**事件**2**事件**N',fun) :   **为选中元素绑定一个或多个事件(多个事件用空格隔开)；注：jQuery 3.0中已弃用此方法，请用on()代替。

**unbind('**事件**1**事件**2**事件**N') :**

bind 的反向操作，为选中元素删除一个或多个事件(多个事件用空格隔开)；jQuery 3.0中已弃用此方法，请用off()代替。

**5.6、事件对象**

**event.stopPropagation()**

防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

**event.preventDefault()**

阻止默认事件行为的触发。

[http_jQuery.com_download]: http://jquery.com/download/
[Center]: /images/20220605/271b4c14d7eb465fa648c911c624df67.png
[http_www.jb51.net_shouce_jQuery1.82]: http://www.jb51.net/shouce/jquery1.82/

jQuery学习总结1

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery内容学习总结

相关 jQuery学习总结

相关 jquery学习总结

相关 JQuery学习总结

相关 jquery基础知识总结1

相关 JQuery学习总结

相关 jQuery学习总结2

相关 jQuery学习总结1

相关 jQuery学习总结

相关 jquery学习手记（1）