jQuery1

时间：2015-06-10 11:55:57 阅读：218 评论：0 收藏：0 [点我收藏+]

标签：

手册：http://jquery.cuishifeng.cn/index.html

原生对象——>jquery对象

this ——> $(this)

jquery对象——>原生对象

$(this) ——> $(this).get(0)

一、jQuery优势：

轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源

二、$ ：其实就是函数名

$ 就是jQuery的一个简写形式
$("#nan") == jQuery("#nan");

三、jQuery的基本格式

$( obj ).on( event , function ( ){ });
event：若要封函数时，如动作为click则封函数所用的参数是clickEv，以此类推。如下图：

四、ready 和 on

ready：可看作onload

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

$(document).on("click",function (){ });

五、简写与标准写法

标准写法：$(document).ready(function( ){ });
简写：$( function( ){ } );

六、jquery选择器

基本选择器

#id ：根据给定的id匹配一个元素
.class ：根据给定的类名匹配元素
element ：根据给定的元素名匹配元素
* ：匹配所有元素
Selector1,selector2,…，selectorN ：将每一个选择器匹配到的元素合并后一起返回

层次选择器

selector1 selector2：选中selector1包含的所有selector2
selector1 > selector2：选中父标签是selector1的下一级的selector2
selector1 + selector2：选中selector1下一个兄弟中的第一个selector2
selector1 ~ selector2：选中selector1后的所有兄弟selector2

基本过滤选择器

div:first：选中所有div中的第一个
div:last：选中所有div中的最后一个
div:not(selector)：div中除了selector外全部选上
div:even：选中所有偶数div，索引从0开始，0为第一个偶数
div:odd：选中所有奇数div，索引从0开始，1为第一个奇数
div:eq(2)：选中下标定位为2的div，索引从0开始
div:gt(4)：选中下标定位为4的div之后的所有div,不包括下标为4的div，索引从0开始
div:lt(4)：选中下标定位为4的div之前的所有div,不包括下标为4的div，索引从0开始

内容过滤选择器

div:contains(text)：选中包含文本text的div，包括其父级，祖先级，外部用“”，内部用‘’
div:empty：选中所有不包含子元素和文本的div
div:parent：选中所有包含子元素和文本的div
div:has(span)：选中包含span标签的div，选中的是div，而非span

属性过滤选择器

div[attr]：选中拥有attr属性的div
div[class=two]：选中class属性为two的div
div[class!=two]：选中class属性不为two的所有div
div[class^=t]：选中class属性以t开头的div
div[class$=e]：选中class属性以e结束的div
div[class*=o]：选中class属性中包含o的div
div[class][class*=h]：选中拥有class属性，且class属性中包含h的div

子标签过滤选择器

div:first-child：选中所有div中，是其父标签中的第一个子标签div
div:fist：选中所有div中第一个标签
div:last-child：选中所有div中，是其父标签的最后一个子标签div
div:last：选中所有div中最后一个标签
div:nth-child(2)：选中所有div中是其父标签中的下标定位的标签，索引从1开始
div:nth-child(even)：选中所有div中是其父标签中的偶数标签，索引从1开始
div:nth-child(odd)：选中所有div中是其父标签中的奇数标签，索引从1开始
div span:only-child：如果某个元素是它父元素中唯一的子元素，那么将会被匹配

七、jquery改变css属性

写法一：

$("#div1").css("width","200px");
$("#div1").css("height","200");

写法二：

$("#div1").css({
width:"50%",
height:200
});

写法三：

$("#div1").width("200");
$("#div1").height("200);

写法四（链式写法）：

```
$("#div1").width(200).height("200");
```

写法五（动画）：

$("#div1").animate({
width:200
},1000,function (){
$(this).animate({height:200});
});

八、创建与插入（jquery方法）

1、创建：

var li=$("<li></li>");

2、插入：

插入到ul下第一位（头）

$("ul").append(li);
li.appendTo("ul");

插入到ul下最后一位（尾）

$("ul").prepend(li);
li.prependTo("ul");

插入到ul之前：$("ul").before(li);

九、创建新属性：

$("#div1").attr("index",5); //创建一个index属性值为5

十、offset( )

$("#div1").offset().left;  //获取相对于文档的距离

$("#div1").position().left;  //获取到上一级的left距离
相当于：$("#div1").get(0).offsetLeft；

十一、scrollLeft(参数) 滚动条的水平距离

若有参数，则为设置：

```
$("#wrap").scrollLeft(100);
```

若无参数，则为获取：

```
$("#wrap").scrollLeft();
```

十二、创建与删除类名

创建：$("#div1").addClass(‘active‘);
删除：$("#div1").removeClass(‘active‘);

十三、jquery一些原生变化

innerHTML——>html( )

value——>val( )

十四、获取窗口高度

$(window).height( );

十五、show( ) 和 hide( )

$("#div1").show()==$("#div1").css("display","block");

$("#div1").hide()==$("#div1").css("display","none");

十六、toggle()：轮流click事件（显示—>隐藏，显示<—隐藏）

若对象为隐藏，则变为显示。
若对象为可见，则变为隐藏。

$(function (){
    $("input").on("click",function (){
        $("div").toggle(500);
 //500代表过渡时间
    });
});

参数：括号中可设置快/慢（时间），以及回调函数；当时间参数“slow”或“fast”或具体时间时，会触发动画。

十七、slide()：向上收缩或向下打开

slideUp( )：向上收缩后隐藏
slideDown( )：显示后向下打开
slideToggle( )：若目标为可见，则触发slideUp效果；若目标为隐藏，则触发slideDown效果。

参数：括号中可以加动画时间，以及回调函数。

十八、stop( )

停止正在运行的动画后，执行当前触发的动画

例子：$("#div1").stop().slideToggle();

十九、finish( )：结束当前动画

二十、fadeToggle( )：以透明形式实现显示和隐藏

$("#div1").fadeToggle();

当div1显示时，则会慢慢透明消失；当div1隐藏时，则慢慢浮现出来

可以添加时间参数

二十一、delay( 时间 )

动画延时，默认为0

二十二、parent( )

取得一个包含着所有匹配元素的父元素（取上一级）

二十三、next( )

获得紧邻在后面的同辈元素

二十四、index( )：获取元素的下标值

若参数为空，返回的就是对象相对于它同辈元素（不一定是相同的标签）的位置
若参数为一个DOM元素或jquery元素，返回的就是参数元素相对于调用对象元素的位置，如：

var index=$(this).parent().children("li").index($(this));

若参数为一个选择器，返回就是调用对象相对于选择器匹配元素中的位置，无匹配则返回1

jQuery1

标签：

原文地址：http://www.cnblogs.com/pan-hello/p/4565327.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行