jQuery1
原生对象——>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($) { });
- on
- $(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
