jQ常用知识点整理

//===========================================
$ === jQuery
入口函数
$(document).ready(function(){});
$(function(){});
jQuery对象转换成DOM对象
$("#demo")[0]
$("demo").get(0)
DOM对象转换成jQuery对象
$(btn)

    .trim()          //去除首尾空格

//================选择器=======================================
基本选择器
(#) //ID选择器
(.) //类选择器
(element)
//标签选择器
(*) //通配符选择器
(,) //并集选择器
层级选择器、基本过滤选择器
(>) //子代选择器
(空格) //后代选择器
(:odd)
//奇数行选择器
(:even)
//偶数行选择器
(:eq) //相符选择器

//================属性=======================================

    .attr();        //设置属性 参数1：属性名   参数2 属性值

    .attr();        //获取属性 参数：属性名

    .removeAttr();  //移除指定属性 参数：属性名

    .prop();        //设置特性 用法同上

    .removeProp()

    .addClass("newClass");      //添加样式

    .removeClass("newClass");   //删除样式

    .toggleClass("newClass");   //切换样式

    .hasClass("nawClass");      //判断有没有指定样式 返回true或false

    .html()         //设置或返回所选元素的内容（包括 HTML 标记）

    .text()         //设置或返回所选元素的文本内容

    .val()          //设置（没有传参数）或返回（有传参数）表单字段的值

    获取数据缓存：

        $(selector).data(); 获取数据缓存

        $(selector).data(“index”);

    设置数据缓存：

        $(selector).data(“index”, 1); 设置数据缓存

        $(selector).data({belong: “传智播客”});

//================筛选=======================================

    .eq()           //获得第N个元素

    .first()        //获得第一个元素

    .last()         //获得最后一个元素

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

    .children()     //子代查找

    .find()         //后代查找

    .next()         //查找后一个兄弟元素

    .nextAll()      //查找后全部兄弟元素

    .parent()       //查找（亲）父元素

    .prev()         //查找前一个兄弟元素

    .prevAll()      //查找当前元素之前所有的同辈元素

    .prevUntil()    //查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

    .siblings()     //查找所有兄弟元素

    .end()          //回到最近的一个"破坏性"操作之前

;------------------不常用---------------------------

    .hasClass()     //检查当前的元素是否含有某个特定的类

    .is()           //如果其中至少有一个元素符合这个给定的表达式就返回true。

    .map()          //将一组元素转换成其他数组

    .has()          //保留包含特定后代的元素

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

    .slice()        //选取一个匹配的子集,参数1:开始位置 2结束位置

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

    .nextUntil()    //查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

    .parents()      //取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素)

    .parentsUntil() //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

//=================文档处理==================================

    var aLink = $("<a href='http://www.baidu.com'>百度一下</a>");

        创建a元素，同时创建属性和文本节点

    .append(aLink);     //把动态创建的a元素，添加到获取到的div元素中

    .appendTo(node);    //将子元素追加到父元素的子元素末尾

    .prepend(node);     //在被选元素的开头插入内容

    .prependTo()        //

    .after()            //在被选元素之后插入内容

    .insertAfter()      //

    .before()           //在被选元素之前插入内容

    .insertBefore()     //

    .wrap()             //用指定的节点包裹起来

    .unwrap():          //移除父元素

    .wrapAll() :        //把匹配的元素看成整体, 再用指定的节点包裹起来

    .wrapInner()        //在匹配的元素内部添加一个节点

    .empty();           //清空所有子元素（光杆司令）

    .remove();          //删除节点  “自杀” 把自己删除掉

    .detach();          //删除节点  会保留绑定的事件和附加的数据

    .clone()            //复制

                        //参数true:表示还会复制该元素绑定的事件

//================css========================================

    .css("属性名","属性值");    //设置样式单个样式

    .css({"color":"red","font-size":"22px"}); //设置样式多个样式

    .css(属性名);     //获取样式单个样式

    .offset()         //相对于窗口的偏移 返回的是object,也可以设置

    .position()       //相对于定位参照物位置 返回的是object (只能获取，不能设置)

    .scrollTop()      //获取/设置匹配元素相对滚动条顶部的偏移

    .scrollLeft()     //获取/设置匹配元素相对滚动条左侧的偏移

    .height()         //高度  带参数设置,不带参数获取,参数是number类型

    .innerHeight()    //高度 + padding

    .outerHeight()    //高度 + padding + border

    .outerHeight(true)//高度 + padding + border + margin

    .width()          //宽度

    .innerWidth()     //宽度 + padding

    .outerWidth()     //宽度 + padding + border

    .outerWidth(true) //宽度 + padding + border + margin

//================事件=======================================

    .click()        //鼠标单击绑定事件 或者触发 click事件

    .dbclick()      //鼠标双击

    .mousedown()    //鼠标按下

    .mouseup()      //鼠标弹起

    .hover(mouseEnter, mouseLeave);

                    // 参数1: 鼠标进入触发的事件 2:鼠标离开触发的事件

    .hover();       // 不管鼠标进入还是离开 都执行此函数

    .mouseenter()： //当鼠标指针穿过元素时，会发生 mouseenter 事件。

    .mouseleave():  //当鼠标离开自己时才会触发，子元素不触发。

    .change()       //改变,比如：文本框发送改变，下来列表发生改变等…

    .keyup()        //键盘按钮松开

    .keydown()      //键盘按钮按下

    .keypress()     //键盘上字符键被按下

    .change         //文本内容或下拉菜单中的选项发生改变，失去焦点时触发

    .select         //选中输入框的内容时触发

    .blur()         //失去焦点事件

    .focus()        //获得焦点事件

    .focusin        //获得焦点,区别在于，他可以在父元素上检测子元素获取焦点的情况

    .focusout       //失去焦点时触发,区别在于，他可以在父元素上检测子元素失去焦点的情况

    .resize         //当调整浏览器窗口的大小时，发生 resize 事件。

    .scroll         //当用户滚动指定的元素时,适用于所有可滚动的元素

    .submit         //当提交表单时

    .ready          //当DOM载入就绪可以查询及操纵时

//================效果=======================================

    隐藏和显示

        .show()            //显示 参数1：动画的速度 2：执行后的回调函数

        .hide()            //隐藏 同上

        .toggle()          //切换 同上

    淡入淡出

        .fadeIn()          //显示 参数1：动画的速度 2：执行后的回调函数

        .fadeOut()         //隐藏 同上

        .fadeToggle()      //切换 同上

        .fadeTo(1000,.5)   //淡入到  0透明 1不透明

    滑动

        .slideDown()       //显示 参数1：动画的速度 2：执行后的回调函数

        .slideUp()         //隐藏 同上

        .slideToggle()     //切换 同上

    自定义动画

        .animate({params},speed,callback)

                //参数1：要修改的内容 2.执行的时长 3.回调函数

    停止动画

    .stop(stopAll,goToEed)          //不传参数

        //参数1：是否清空动画队列 2：否立即执行完当前正在执行的动画

    .finish()       //停止动画, 并直接到达终点位置

    .delay()        //设置一个延时来推迟执行队列中之后的项目

    

//=================ajax================================

//判断是否IE浏览器,? $ajax IE兼容问题需要在url前加空格

function isIE(paramUrl) {

    if (!!window.ActiveXObject || "ActiveXObject" in window)  

        return ' ' + paramUrl;  

    else  

        return paramUrl;  

}