zoukankan      html  css  js  c++  java
  • jquery的使用


    jquery的官网:http://jquery.com/

    说白了:jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
    js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js)

    学习jQuery,主要学习jQuery的一大堆的api。
    API:application programming interface:应用程序编程接口,说白了,API就是方法。
    obj.funName(params);
    注意:方法调用的时候,都带小括号(),使用jQuery的方法的时候,不要忘了小括号。
    1.1怎样使用jQuery?(重点)
    ?下载jquery
    官网下载地址:http://jquery.com/download/

    ?使用jQuery实现div动态展示案例的步骤:
    1)引包(引入jQuery文件)
    <script src="jquery-1.11.1.js"></script>
    2)入口函数
    $(document).ready(function () {
    });
    3)功能实现
    $("#btnShowDiv").click(function () {
    $("div").show(1000);
    });
    ?div动态展示案例中JavaScript与jquery的对比
    JavaScript jquery
    入口函数 只能有一个,如果有多个,后面的会覆盖前面 可以有多个,并且不会发生覆盖的情况
    代码容错性 代码容错性差,代码出现错误,会影响到后面代码的运行。 代码容错性好,屏蔽错误,并且不会影响后面代码的运行。
    浏览器兼容性 兼容性差,比如火狐不支持innerText 对浏览器兼容性做了封装,因此不存在兼容性问题
    操作复杂性 DOM操作复杂,对于一些简单的动画效果,实现起来比较麻烦 DOM操作简单,支持隐式迭代,实现动画非常简单。

    1.3jQuery详细解释
    1.3.1版本介绍
    ?大版本分类
    jquery大版本分为1.x和2.x(3.0)

    区别:2.x版本不再支持IE6/7/8
    ?同一版本分类
    jQuery每一个版本又分为压缩版和未压缩版:
    ?jquery.js:未压缩版本(开发版本),代码可读性高,推荐在开发和学习阶段使用,方便查看源代码。
    ?jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符,基本没有可读性,推荐在项目生产环境使用,因为文件较小,减少网络压力。
    ?关于jquery3.0

    翻译:jquery3.0现在发布了,这个版本自从2014年10月就开始测试了,我们的目标是创建一个更苗条、更快的jquery版本(并且能向后兼容)。我们已经移除了IE旧版本的解决方案,并且带来了一些较为现代的web API,但这是有道理的。3.0是2.x分支的延续,但是有一些突破性的改变。但是1.12和2.2分支将会在同一时间继续获得关键性的支持补丁。但是他们不会再有任何新的功能和重大的修订。jQuery3是jQuery的未来,如果你需要兼容IE6-8,你可以继续使用1.12版本。
    1.3.2引包的注意点
    ?忘记引包或者引包在入口函数的后面。

    ?引包路径错误(404)

    1.3.3入口函数
    ?jQuery入口函数的两种写法
    //第一种写法
    $(document).ready(function() {

    });
    //第二种写法
    $(function() {

    });
    ?对比JavaScript的入口函数jQuery的入口函数,执行时机
    1.JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
    2.jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

    1.3.4了解jQuery的$符号
    ?$是什么
    其实$就是一个函数:$();参数不一样,功能不一样
    $常用的几种情况:
    $(function() {});//参数是function,说明是入口函数
    $(“#btnSetConent”);//参数是字符串,并且以#开头,是一个标签选择,查找id=“btnSetContent”的元素
    $(“div”);//查找所有的div元素
    $(document).ready(funciton(){})//将document转换成jQuery对象
    补充
    $ === jQuery,也就是说能用$的地方,完全可以用jQuery,$仅仅是简写形式。
    1.3.5jQuery对象与DOM对象之间的转换(难点)
    ?什么是DOM对象?
    使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。
    var btn = document.getElementById(“btnShowDiv”);
    var divs = document.getElementsByTagName(“div”);
    dom对象只可以使用dom对象的方法和属性
    domObject.innerHTML = “dom对象设置文本”;
    domObject.style.display= “block”;//dom对象显示对象
    domObject.onclick = function() {}//dom对象绑定事件
    ?什么是jquery对象?
    jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。比如使用$()方法返回对象都是jquery对象。
    $(“div”);//标签选择器返回的jquery对象。
    $(“#btnShowDiv”);//id选择器返回的jquery对象。
    jquery对象只能使用jquery对象的方法
    var $obj = $(“div”);
    $obj.html(“jquery对象设置文本的方法”);
    $obj.show();//jquery对象显示文本
    $obj.click(function() {});//jquery对象绑定事件
    ?错误的用法
    $(“div”).innerHTML;//jquery对象不能调用dom方法
    //dom对象不能调用jquery方法。
    document.getElementById(“btnShowDiv”).show();
    ?深入了解jQuery对象
    jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合)
    联想记忆:衣服和洗衣机的关系
    ?jQuery对象和DOM对象的相互转换
    1.jquery对象转DOM对象
    var $li = $(“li”);
    //第一种方法(推荐使用)
    $li[0]
    //第二种方法
    $li.get(0)
    //其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
    2.DOM对象转jquery对象(联想记忆:我有钱[美元],所以我的功能就更强大)
    var $obj = $(domObj);
    // $(document).ready(function(){});就是典型的DOM对象转jQuery对象
    1.3.6区分jQuery和JavaScript
    JavaScript是一门编程语言,jquery是用JavaScript实现的一个JavaScript库,目的是简化我们的开发。(联想记忆:不能扛着洗衣机去出差)

    1.4jQuery选择器(重点)
    1.4.1jQuery选择器概述
    ?为什么要学习jQuery选择器?
    考虑兼容性的话,js提供的获取元素的方法太少了,只有两个,不能够满足我们的要求,比如想要通过class来获取元素就不行了。
    document.getElementById(“btnShowDiv”);
    document.getElementsByTagName(“div”);
    ?什么是jQuery选择器?
    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。
    $("#btnShowDiv")//id选择器
    $("div")//标签选择器
    jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
    jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
    1.4.2基本选择器
    名称 用法 描述
    ID选择器 $(“#id”); 获取指定ID的元素
    类选择器 $(“.class”); 获取同一类class的元素
    标签选择器 $(“div”); 获取同一类标签的所有元素
    并集选择器 $(“div,p,li”); 使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素
    交集选择器(标签指定式选择器) $(“div.redClass”); 注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。
    总结:跟css的选择器用法一模一样。
    1.4.3层级选择器
    名称 用法 描述
    子代选择器 $(“ul>li”); 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素
    后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等
    跟CSS的选择器一模一样。
    1.4.4过滤选择器
    这类选择器都带冒号:
    用法 描述
    :eq(index) $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
    :odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中,选择索引号为奇数的元素
    :even $(“li:even”).css(“color”, ”red”); 获取到的li元素中,选择索引号为偶数的元素
    1.4.5筛选选择器(方法)
    筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
    用法 说明
    children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”),子类选择器
    find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
    siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点,不包括自己本身。
    parent() $(“#first”).parent(); 查找父亲
    eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始


    1.2jQuery操作样式
    1.2.1css操作
    功能:设置或者修改样式,操作的是style属性。
    ?设置单个样式
    //name:需要设置的样式名称
    //value:对应的样式值
    css(name, value);
    //使用案例
    $("#one").css("background","gray");//将背景色修改为灰色
    ?设置多个样式
    //参数是一个对象,对象中包含了需要设置的样式名和样式值
    css(obj);
    //使用案例
    $("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
    });
    ?获取样式
    //name:需要获取的样式名称
    css(name);
    //案例
    $("div").css("background-color");
    注意:获取样式操作只会返回第一个元素对应的样式值。
    1.2.2class操作
    ?添加样式类
    //name:需要添加的样式类名,注意参数不要带点.
    addClass(name);
    //例子,给所有的div添加one的样式。
    $(“div”).addClass(“one”);
    ?移除所有样式类
    //不带参数,移除所有的样式类
    removeClass()
    //例子,移除div所有的样式类
    $(“div”).removeClass();
    ?移除单个样式类
    //name:需要移除的样式类名
    removeClass(“name”);
    //例子,移除div中one的样式类名
    $(“div”).removeClass(“one”);
    ?判断是否有样式类
    //name:用于判断的样式类名,返回值为true false
    hasClass(name)
    //例子,判断第一个div是否有one的样式类
    $(“div”).hasClass(“one”);
    ?切换样式类
    //name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
    toggleClass(name);
    //例子
    $(“div”).toggleClass(“one”);
    经验总结:
    1.如果操作到的样式非常少,可以考虑css方法
    2.如果操作到的样式非常多,那么可以通过class方法来操作,将样式写到一个class类里面。
    3.如果考虑到后期维护方便,将css从js中分离出来,那么推荐使用class的方式来操作。
    【案例:tab栏切换案例】
    1.3jquery动画
    通过下拉菜单引入动画。
    jquery提供了三组动画,这些动画都是标准的、有规律的效果,jquery还提供了自定义动画的功能。【演示动画例子】
    1.3.1显示与隐藏
    显示(show)与隐藏(hide)是一组动画:
    show方法详解:
    show([speed], [callback]);
    //speed(可选):动画的执行时间
    1.如果不传,就没有动画效果。
    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
    3.固定字符串,slow(200)、normal(400)、fast(600),如果传其他字符串,则默认为normal。
    //callback(可选):执行完动画后执行的回调函数
    hide方法详解:
    与show方法的用法完全一致。
    show/hide:修改的是元素的width、height、opacity。
    1.3.2滑入与滑出
    滑入(slideUp)与滑出(slideDown)是一组动画,效果与卷帘门类似
    slideUp/slideDown,使用方法与show/hide基本一致。
    slideUp(speed, callback);
    //speed(可选):动画的执行时间
    1.如果不传,默认为normal,注意区分show/hide。
    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
    3.固定字符串,slow(200)、normal(400)、fast(600)
    //callback(可选):执行完动画后执行的回调函数
    滑入滑出切换
    $(selector).slideToggle(speed,callback);
    //如果是隐藏状态,那么执行slideDown操作,如果是显示状态,那么执行slideUp操作。
    slideUp/slideDown:修改的是元素的height
    【修改案例:下拉菜单案例】
    1.3.3淡入与淡出
    fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。
    fadeIn(speed, callback);
    //speed(可选):动画的执行时间
    1.如果不传,默认是normal。
    2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
    3.固定字符串,slow(200)、normal(400)、fast(600)
    //callback(可选):执行完动画后执行的回调函数
    淡入淡出切换:
    fadeToggle(speed, callback);
    //如果当前元素处于隐藏状态,那么执行fadeIn操作,如果处于显示状态,那么执行fadeOut操作。
    淡入淡出到某个值
    与淡入淡出的区别:淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明;而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的!
    fadeTo(speed, value, callback)//可以设置具体的透明度
    //speed(必须)
    //value 0-1之间的数值(比如0.4),表示淡到某一个值。
    //callback(可选) 回调函数
    fade系列方法:修改的是元素的opacity
    1.3.4动画小结
    1.jQuery给我们提供了三组动画,show/hide、slideUp/slideDown、fadeIn/fadeOut
    2.动画切换方法:slideToggle、fadeToggle,注意:show和hide没有切换的方法。
    3.淡入淡出到某个值:fadeTo方法。
    4.show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
    5.show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值,都是带数字的,因为带了数字才能做渐变。

    1.3.5自定义动画
    animate:自定义动画
    $(selector).animate({params},[speed],[callback]);
    // {params}:要执行动画的CSS属性,带数字(必选)
    // speed:执行动画时长(可选)
    // callback:动画执行完后立即执行的回调函数(可选)
    动画支持的属性:
    http://www.w3school.com.cn/jquery/effect_animate.asp
    案例【360开机动画】
    1.3.6easing参数
    控制动画在不同元素的速度,默认为“swing”
    “swing”:在开头和结尾移动慢,在中间移动速度快
    “linear”:匀速移动

    1.3.7动画队列问题
    引出事件队列效果【案例:二级菜单案例】
    在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画执行完成了才会执行(联想:地铁进站)。
    1.3.8停止动画
    stop方法:停止动画效果
    stop(clearQueue, jumpToEnd);
    //第一个参数:是否清除队列
    //第二个参数:是否跳转到最终效果
    最常用的停止动画:stop();
    1.4jquery操作DOM(节点)
    1.4.1创建元素
    //$(htmlStr)
    //htmlStr:html格式的字符串
    $(“<span>这是一个span元素</span>”);
    1.4.2添加元素
    ?添加新建的元素:
    //方法一:将jQuery对象添加到调用者内部的最后面。
    var $span = $(“<span>这是一个span元素</span>”);
    $(“div”).append($span);

    //方法二:参数传字符串,会自动创建成jquery对象
    $(“div”).append(“<span>这是一个span元素</span>”);
    ?添加已经存在的元素
    var $p = $(“p”);
    $(“div”).append($p);
    //注意:如果添加的是已经存在的元素,那么会把之前的元素给干掉。(类似于剪切的功能)。
    类似的用法:append prepend after before
    【案例:省市选择】
    ?使用html方法创建元素
    //设置内容
    $(“div”).html(“<span>这是一段内容</span>”);
    //获取内容
    $(“div”).html()
    【案例:表格创建案例】
    1.4.3清空元素
    empty:清空指定节点的所有元素,自身保留(清理门户)
    $(“div”).empty();//清空div的所有内容(推荐使用,会清除子元素上绑定的内容,源码)
    清空元素的第二种方法
    $(“div”).html(“”);//使用html方法来清空元素,不推荐使用,会造成内存泄漏,绑定的事件不会被清除。
    1.4.4删除元素
    remove:相比于empty,自身也删除(自杀)
    $(“div”).remove();
    【案例】:表格删除
    1.4.5克隆元素
    作用:复制匹配的元素
    // 复制$(selector)所匹配到的元素(深度复制)
    //cloneNode(true)
    // 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
    $(selector).clone();


    1.2.1jQuery操作属性(重点)
    ?设置单个属性
    //第一个参数:需要设置的属性名
    //第二个参数:对应的属性值
    attr(name, value);
    //用法举例
    $(“img”).attr(“title”,”哎哟,不错哦”);
    $(“img”).attr(“alt”,“哎哟,不错哦”);
    ?设置多个属性
    //参数是一个对象,包含了需要设置的属性名和属性值
    attr(obj)
    //用法举例
    $("img").attr({
    title:"哎哟,不错哦",
    alt:"哎哟,不错哦",
    style:"opacity:.5"
    });
    ?获取属性
    //传需要获取的属性名称,返回对应的属性值
    attr(name)
    //用法举例
    var oTitle = $("img").attr("title");
    alert(oTitle);
    注意:
    1.获取属性时,只会获取到第一个元素对应的属性,与css方法一样
    2.获取属性时,如果该属性不存在,那么会返回undefined
    【案例:美女相册】
    ?移除属性
    //参数:需要移除的属性名,如果传空,那么不会有任何操作,注意,并不是移除所有的属性。区分removeClass。
    removeAttr(name);
    //用法举例
    $("img").removeAttr("title");
    ?prop
    注意:在jQuery1.6之后,对于checked、selected、disable这类boolean类型的属性来说,如果使用attr方法获取属性值,得到的不是true和false,而是checked以及undefined。,使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。
    //设置属性
    $(“:checked”).prop(“checked”,true);
    //获取属性
    $(“:checked”).prop(“checked”);//返回true或者false
    【案例:表格全选、反选案例】
    1.2.2jQuery操作值与内容
    ?val方法
    val方法用于设置和获取表单元素的值,例如input、select、textarea的值
    //设置值
    $(“#name”).val(“张三”);
    //获取值
    $(“#name”).val();
    【案例:搜索提示框】
    ?html方法
    //设置内容
    $(“div”).html(“<span>这是一段内容</span>”);
    //获取内容
    $(“div”).html()
    ?text方法
    //设置内容
    $(“div”).text(“<span>这是一段内容</span>”);
    //获取内容
    $(“div”).text()
    html方法与text方法的区别:
    html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
    1.2.3jQuery操作尺寸
    ?height
    设置或者获取高度
    //带参数表示设置高度
    $(“img”).height(200);
    //不带参数获取高度
    $(“img”).height();
    返回值是number类型(比如200),而使用$(“img”).css(“width”)返回的是字符串(比如200px)
    ?width
    设置获取获取宽度,与高度操作功能一样
    //带参数表示设置宽度
    $(“img”).width(200);
    //不带参数获取宽度
    $(“img”).width();
    1.2.4jQuery操作坐标值
    ?offset
    设置或者获取元素相对于文档document的位置。
    //设置位置
    $(selector).offset({left:100, top: 150});
    //获取位置
    $(selector).offset();
    注意:使用offset操作,如果元素没有设置定位(默认position:static),则会把position修改为relative.会修改left、top
    ?position
    获取相对于其最近的有定位的父元素的位置。
    // 获取,返回值为对象:{left:num, top:num}
    $(selector).position();
    注意:position方法只能获取,不能设置
    ?scrollTop
    设置或者获取垂直滚动条的位置
    // 有参数表示设置偏移,参数为数值类型
    $(selector).scrollTop(100);
    // 无参数表示获取偏移
    $(selector).scrollTop();
    ?scrollLeft
    设置或者获取水平滚动条的位置
    // 有参数表示设置偏移,参数为数值类型
    $(selector).scrollLeft(100);
    // 无参数表示获取偏移
    $(selector).scrollLeft();
    【案例:仿腾讯固定菜单栏案例】
    1.3jQuery事件机制
    JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件的处理能力。
    1.3.1jQuery事件的发展历程
    简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
    ?简单事件绑定
    click(handler) 单击事件
    mouseenter(handler) 鼠标进入事件
    mouseleave(handler) 鼠标离开事件
    scroll(handler) 滚动事件
    缺点:一次只能绑定一个事件
    ?bind事件绑定
    不推荐使用,jQuery1.7版本后被on取代
    //绑定多个事件
    //第一个参数:事件类型
    //第二个参数:事件处理程序
    $("p").bind("click mouseenter", function(){
    //事件响应方法
    });
    缺点:不支持动态创建出来的元素绑定事件。
    ?delegate事件绑定
    支持动态绑定事件
    // 第一个参数:selector,要绑定事件的元素
    // 第二个参数:事件类型
    // 第三个参数:事件处理函数
    $(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
    });
    理解:为什么delegate支持动态绑定事件?原因是事件冒泡机制。因为事件时绑定到父元素上的,由子元素触发。
    ?on事件绑定
    jQuery1.7之后,jQuery用on统一了所有事件的处理方法。
    1.3.2on事件绑定(重点)
    优势:最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用。
    // 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
    // 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
    // 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
    // 第四个参数:handler,事件处理函数
    $(selector).on(events[,selector][,data],handler);

    例子:
    // 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
    $(selector).on( "click",“span”, function() {});
    // 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定(不使用代理)。
    $(selector).on( "click", function() {});

    1.3.3事件解绑
    ?unbind() 方式(不用)
    作用:解绑事件
    $(selector).unbind(); //解绑所有的事件
    $(selector).unbind(“click”); //解绑指定的事件
    ?undelegate() 方式(不用)
    作用:解绑事件
    $( selector ).undelegate(); //解绑所有的delegate事件
    $( selector).undelegate( “click” ); //解绑所有的click事件
    ?off方式(重点)
    作用:解绑事件
    // 解绑匹配元素的所有事件
    $(selector).off();
    // 解绑匹配元素的所有click事件
    $(selector).off(“click”);
    // 解绑所有代理的click事件,元素本身的事件不会被解绑
    $(selector).off( “click”, “**” );
    1.3.4事件触发
    简单事件触发
    $(selector).click(); //触发 click事件
    trigger方法触发事件
    $(selector).trigger(“click”);
    triggerHandler触发 事件响应方法,不触发浏览器行为
    比如:文本框获得焦点的默认行为
    $(selector).triggerHandler(“focus”);

    1.3.5jQuery事件对象()
    对象属性 解释
    event.type 事件类型
    event.data 存储绑定事件时传递的附加数据
    event.target 点了谁就是谁
    event.currentTarget 当前DOM元素,等同于this
    event.delegateTarget 代理对象
    screenX和screenY 对应屏幕最左上角的值
    offsetX和offsetY 点击的位置距离元素的左上角的位置
    clientX和clientY 距离页面左上角的位置(忽视滚动条)
    pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)
    event.switch 鼠标按键类型,1=鼠标左键 2=鼠标中键 3=鼠标右键
    event.keyCode 按下的键盘代码
    event.stopPropagation() 阻止事件冒泡行为
    event.preventDefault() 阻止浏览器默认行为
    案例【按键变色】
    1.4jQuery补充
    1.4.1链式编程
    链式编程原理:return this;
    通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。

    end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。
    1.4.2隐式迭代
    隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
    如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。

    案例【五角星评分控件】
    1.4.3each方法
    有了隐式迭代,为什么还要使用each函数遍历?
    大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。
    如果要对每个元素做不同的处理,这时候就用到了each方法

    作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数
    // 参数一表示当前元素在所有匹配元素中的索引号
    // 参数二表示当前元素(DOM对象)
    $(selector).each(function(index,element){});

    【案例】 什么都看不见
    1.4.4多库共存
    我们知道jQuery占用了$这个标识符,如果引用的其他库也用到$这个标识符,这时候为了保证每个库都能正常使用,这时候就存在了多库共存的问题。
    后引入的$的会覆盖掉先引入的库中的$。
    $ === jQuery
    解决办法:
    jQuery的$和jQuery是两个相同的变量,因此遇到多库共存的时候,可以让jquery交出$符的控制权,这个时候还是可以使用$.
    console.log($);//function(selector, context){}
    //$.noConflict();//释放$的控制权
    console.log($);{name:”zhangsan”,age:12}

    jQuery(function () {
    jQuery("div").html("我不是div的内容");
    });
    1.5jQuery插件机制
    1.5.1第三方插件
    jQuery有着丰富的插件,使用这些插件能给jQuery提供一些额外的功能。
    jquery.color.js
    animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。
    如何使用第三方插件:
    1.引入jQuery文件
    2.引入插件
    3.使用插件
    1.5.2制作插件
    全局jQuery函数扩展方法
    $.pluginName = function() {};

    jQuery对象扩展方法
    $.fn. pluginName = function() {};
    1.5.3jQuery UI
    jQueryUI专指由jQuery官方维护的UI方向的插件。
    官方API:http://api.jqueryui.com/category/all/

  • 相关阅读:
    jstl与el学习笔记
    Subversion 安装笔记
    某公司面试
    字符集与字符编码的一些小常识,以及java web中文乱码的一些solution
    分治算法与合并排序示例
    C/C++ 笔试,难倒我哉
    HTML meat作用
    VIM配置DBGp调试PHP程序
    更新系统引导项
    PHP技术讨论群
  • 原文地址:https://www.cnblogs.com/huqinhan/p/5766997.html
Copyright © 2011-2022 走看看