jQuery知识点01

jQuery

• jQuery入门

1. javascript类库

JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

核心理念是write less,do more(写得更少,做得更多)

当前流行的 JavaScript 库有：

jQuery  使用非常多了

EXTJS 功能比jQuery更多，但ext2.0收费

Prototype 一般用于做框架

YUI! (Yahoo! User Interface)

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

 

1. jQuery介绍

 

• ljQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。
• ljQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。由美国人John Resig在2006年1月发布
• ljQuery是免费、开源的
• ljQuery分类：

WEB版本：我们主要学习研究  （jQuery-版本.js  、 jQuery-版本-min.js）

UI版本：集成了UI组件

mobile版本：针对移动端开发

qunit版本：用于js测试的

 

jquery官网  http://jquery.com/

 

我们接触到的版本

 

 

1. 导入jQuery

通过script标签的src属性导入即可

 

• jQuery基本操作

1. 获得jQuery对象

语法：$(选择器或者DOM对象)   或   jQuery(选择器或者DOM对象)

 $  ==  jQuery

<script type="text/javascript"> // $() 语法，建议：如果是jQuery对象变量名使用$作为前缀 var  $obj = $("#username");   // val() 函数 获得 value属性的值 alert($obj.val()); </script>

1. DOM对象和jQuery对象之间的转换

注意:jQuery对象使用jquery的api（方法、函数）。DOM对象使用 dom 的函数、属性等。不能混淆使用。

<script type="text/javascript" > //1将dom对象 转换 jquery对象          //先获得dom对象 var obj = document.getElementById("username"); //alert(obj.value);         //转换成jquery对象 var $obj  = $(obj); //获得value的值 //alert($obj.val());   //2jquery 对象 转换 dom 对象         //先通过 $(...) 获得jQuery对象，底层使用数组进行维护的，可以存放多个对象。     //然后通过get()可以从jquery对象转换成 dom对象。参数：数组的下标，可以省略。如果省略下标获得dom 数组。   var obj2 = $obj.get(0); //alert(obj2.value);   // 底层是数组，也可以直接通过下标获得dom对象 alert($obj[0].value); </script>

 

• 选择器

基本,层次,基本过滤,内容过滤,可见性过滤,属性,子元素过滤,表单过滤,表单对象属性过滤

1. 基本

• lid选择器，<标签  id="id值">

语法：$("#id值")

• l元素(标签)选择器  <标签>

语法：$("标签")

• l类（class）选择器  <标签  class="class名称">

语法：$(".class名称")

• l所有

语法：$("*")

• l多选择

语法：$("选择器1，选择器2，....")

1. 层次

• l所有子孙元素

语法：$("A  B")  --> A标签中 所有的B标签

• l所有孩子元素

语法：$("A > B")  --> A标签中 所有的子标签中B标签。

• l后面第一个兄弟

语法：$("A + B")  --> A标签后面的第一个兄弟

• l后面的所有兄弟

语法：$("A ~ B")  --> A标签后面的所有兄弟

1. 基本过滤

：first 获得第一个

：last 获得最后一个

：not(选择器) 过滤不需要内容

：even 所有偶数，从0开始

：odd 所有奇数

：eq(索引值) 指定下标

：gt(索引值) 大于

：lt(索引值) 小于

：header 所有<h1> ...<h6>

：animated 动画

：focus 焦点

1. 内容过滤

：contains(text) 是否包含指定的内容

：empty 是否为空，不包含子元素、不包含文本

：has（选择器），当前元素，是否还有指定的孩子。

：parent 不为空，（有子节点的元素）

 

1. 可见性过滤

：hidden 所有隐藏的(存在浏览器兼容问题)

：visible 所有可见的

 

1. 属性

[attribute]   有此属性的元素

[attribute=value] 有属性值为value的元素

[attribute!=value] 属性值不等于value的元素

[attribute^=value] 属性值以value开头的元素

[attribute$=value] 属性值以value结尾的元素

[attribute*=value] 属性值含value的元素

[属性表达式1] [属性表达式2]... 复合属性选择器 需要同时满足多个条件时使用

 

1. 子元素过滤

：nth-child() 指定孩子 ，从1开始。

：first-child 第一个孩子

：last-child 最后一个孩子

：only-child 自己是唯一的孩子

 

1. 表单过滤

：input 表示所有的表单元素（input, textarea, select 和 button）

：text 文本 <input type="text">

：password 密码 <input type="password">

：radio 单选 <input type="radio">

：checkbox 复选框

：submit 提交

：image 按钮，可以显示图片

：reset 重置

：button 按钮  <input type="button"> 或 <button>

：file 文件上传

：hidden  <input type="hidden" > <div style="display:none;"> <br/>(存在浏览器兼容问题)

 

1. 表单对象属性过滤

：enabled 可以使用

：disabled 不可使用

：checked 选中的元素(单选框和多选框)

：selected 选中的元素(下拉选)

 

• 属性和样式

属性,类class,html代码/文本/值,css,位置,尺寸

1. 属性

attr(name)  通过属性名获得属性值。<标签  属性名=“属性值”>

attr(key,val)  给指定的属性设置值。（设置一个）

attr(pro)  给jQuery对象设置一组值。使用JSON格式。

{key:value , key : value , .....}  key必须使用双引号，value如果字符串也必须使用双引号。

使用单引号，属于畸形格式json

removeAttr(name) 将执行属性移除

 

1. 类class

操作的是标签的class属性 <标签  class="class名称">

 

addClass(class名称) 追加一个class值

removeClass(class) class移除

toggleClass(class) 添加和移除切换。如果没有就添加，如果有就移除。

 

1. html代码/文本/值

操作的是标签的value属性或者标签体

 

val()  获得 value属性的值。<标签  value="">

val(值) 设置值

 

html()  获得标签体内容，以标签方式

html(值) 设置内容

 

text()  获得标签体内容，以文本方式

text(值) 以文本方式设置内容

 

1. css

操作的是标签的样式 <标签  style="k:v; k:v ; ....">

 

css(name) 获得样式

css(name,value) 设置样式

css(pro)  使用json设置一组样式

1. 位置

offset() 获得位置，返回json数据。格式：{"top": xx , "left" : yy}

 

offset(坐标) 设置位置

position()  获得相对父元素偏移

scrollTop([val]) 获得 或  设置 垂直滚动条的位置

scrollLeft([val])  获得 或 设置 水平滚动条的位置

 

1. 尺寸

height([val]) 获得 或 设置 高度

width([val]) 获得 或 设置 宽度

• 文档处理

内部插入,外部插入,复制,替换,删除,包裹

1. 内部插入

A.append(B)  ，将B插入到A内部的后面。（追加到后面）

A.prepend(B) ，将B插入到A内部的前面。（追加到前面)

 

A.appendTo(B) , 将A插入到B内部的后面。（追加到后面）

A.prependTo(B) 将A插入到B内部的前面。（追加到前面）

 

1. 外部插入

A.after(B)，将B插入到A后面

A.before(B) ，将B插入到A前面

 

A.insertBefore(B) ，将A插入到B前面

A.insertAfter(B) ，将A插入到B后面

 

1. 复制

clone(event [,deepEven])

参数1：表示是否克隆事件

参数2：子元素中绑定数据是否被克隆。

1. 替换

A.replaceWith(B)  使用B替换掉A

A.replaceAll(B)  使用A替换掉所有的B

1. 删除

empty() 清空标签体内容，删除所有子元素

remove() 将指定对象移除，返回值为移除对象。但此对象将绑定事件，绑定数据都一并移除。

detach()将指定对象移除，返回值为移除对象。但此对象保留 绑定事件，绑定数据 等。

 

1. 包裹

wrap(...) ： 每一个匹配元素使用指定的内容包裹。

wrapAll(...)：所有的元素使用一个指定的内容包裹

wrapInner(...)：子节点使用指定的内容包裹。

unwrap(): 移出该元素的父元素。

 

六.筛选

筛选与之前的选择器雷同,筛选提供的都是函数.

1. 过滤

 

eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始.

first():第一个

last():最后一个

hasClass(...):判断元素是否含有特定的样式

filter(...):筛选出与指定表达式匹配的元素集合

is(...):判断元素是否符合指定的选择器

has(...):含有特定后代的元素

not(...):删除与指定表达式匹配的元素

slice(start,end):从给定的数组中，按照范围截取元素。  [start,end)

map(fn):将一组元素转换成其他数组

 

1. 查找

 

children([...]):获取他的所有孩子

closest(...):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

find(...):查找后代

next():下一个兄弟

nextAll():后面所有的兄弟

nextUntil(...):从下一个兄弟开始,直到指定元素结束

parent():获取父元素

parents():匹配元素的祖先元素的元素(不包含根元素)

prev():上一个兄弟

prevAll():前面的所有兄弟

prevUntil():从上一个兄弟开始,直至指定元素结束

siblings():所有的兄弟

closest和parents的主要区别是： 1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找； 2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤； 3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

 

1. 串联

 

 

A.add(B)  将A和B拼凑在一起，等效 $(A,B)

A.children().andSelf()   所有孩子，再添加自己

A.children().end()...  使用end后将返回A位置

contents() 获得所有节点（子元素、文本）  <div>abc<a></a> xxx</div>

七.事件

1. 常见事件

 

focus和focusin  得到焦点

focus 获得焦点

foucsin 获得焦点。可以在父元素上检测子元素获取焦点的情况

blur和focusout 失去焦点

 

mouseover 和 mouseenter 移进

mouseover , 如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件

mouseenter ,如果鼠标指针穿过任何子元素，不会触发 mouseenter 事件

mouseout和mouseleave 移除  同上

 

1. 页面载入

ready(fn):页面载入,在一个页面中可以使用多次

常用格式1:

$(document).ready(function(){

....

})

常用格式2: 格式1的简化版

$(function(){

......

});

常用格式3:完整版

jQuery(document).ready(function(){

......

});

1. 事件处理和委派

 

on:绑定多个事件

one: 绑定一次事件

bind和unbind

bind:绑定事件,一直使用,直到解绑

例如:$btn1.bind(“click”,function(){}); ===$btn1.click(function(){});

unbind:解绑事件

绑定的时候可以指定别名,格式:  事件.别名

例如:

bind(“click.c1”,fn);

unbind(“click.c1”);

trigger和triggerHandler

trigger() 触发所有的事件（包括浏览器默认的）

triggerHandler() 触发所有的事件（不包括浏览器默认的）

 

委派

live  jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效,例如给A标签添加事件，之后再追加a标签都具有相同的事件。

die 解绑

1. 事件切换

hover 在mouseover和mouseout之间进行切换

toggle 点击事件切换，点击第一次执行 fn，点击第二次执行fn2.....

 

 

八.效果

 

• l基本：改变高和宽

show(速度，[fn]) 显示 当显示成功后触发fn

hide() 隐藏

toggle(speed [,fn]) 切换,如果隐藏就显示，如果显示就隐藏。

• l滑动：改变高度

slideDown ，显示（从上往下）

slideUp，隐藏（从下往上）

slideToggle() 切换

• l淡入淡出：改变透明度

fadeIn 显示

fadeOut  隐藏

fadeToggle 切换

fadeTo 指定对象透明度