• jquery总结


    jQuery是一个javascript函数库。

    1.包含以下特性:

    • html元素选取;
    • html元素操作;
    • css操作;
    • html事件函数;
    • js特效和动画;
    • html dom遍历和修改;
    • ajax
    • utilities

    2.元素引用

    通过jquery的$()引用页面元素,方法包括通过id,class,tagName,并可以通过层级关系以及dom方法。其返回的对象为jQUery对象,是一个集合对象,不能直接调用DOM方法。

    3.jquery对象和dom对象的转换

    jquery对象才能使用jquery方法,与dom对象有区别。dom对象转换为jquery对象通过$()转换。

    例:$(document.getElementById('a'))为jquery对象。

    jquery对象要使用dom方法,需要转换为DOM对象,一般采用索引取出。如:$('#a')[0]。转换为dom对象后,不可再用jquery方法。

    注:需区分dom对象和jquery对象,区分dom方法和jquery方法。

    4.获取jquery集合中具体项的方法

    通过索引在集合中获取具体的项[](注:返回dom对象),也可以用eq(注:返回jquery对象)和get(n)(注:返回dom对象)的方法来获取。

    通过eq获取:$('div').eq(0).html();

    通过get()获取:$('div').get(0).innerHTML;

    5.遍历处理

    当需要对集合里面的所有元素进行处理时,jquery提供方法遍历进行处理。

    $('div').each(function(i){this.style.background=['red','green','blue'][i]})   //索引为0,1,2的div背景色设置。

    $("li").each(function(i){$(this).text(['a','b','c'][i])}//索引为0,1,2的li内容设置。

    6.扩展功能

    使用的方法为(通过"$.extend"扩展)

    原型为:extend(dest,src1,src2,src3...);//含义为将src1,src2,src3...合并到dest中,结果返回值为合并后的dest,当不想dest被改变结构时,可以写为:

    var newsrc=$.extend({},src1,src2,src3...);

    具体添加方法:

    $.extend({hello:function(){alert('hi')}});//添加到jquery全局对象中;

    $.fn.extend({hello:function(){alert('hi')}});//添加到jquery的实例对象中。

    调用上面的方法:

    $.hello();

    7.方法连写

    $('#p1').css("color",'red').slideUp(2000).slideDown(2000);

    8.css样式控制

    $('#p').css('background');//返回元素背景颜色。

    $('#p').css('background','red');//元素背景颜色设置。

    $('#p').css(color:'red',background:'#fff');//设置多个样式。

    addClass()和removeClass()可以通过class名称增删样式。toggleClass可以根据实际情况增删。

    9.jquery中自定义的几个事件

       (1)hover(fn1,fn2);  //鼠标放上去时触发fn1,移开后触发fn2。

        (2)$(document).ready(function(){});等价于$(function(){});

        (3)toggle(fn1,fn2);  //第一次点击触发第一个函数,第二次点击触发第二个函数。随后重复轮番调用。$('p').toggle(function(){},function(){});

        (4)trigger(eventtype);  //匹配元素触发某类事件。

                $('p').triggle('click');  //触发所有P元素的click事件。

         (5)bind(eventtype,fn),unbind(eventtype):事件绑定与反绑定。从每一个匹配元素中添加或者删除绑定事件。

                $('p').bind('click',function(){});

                $('p').unbind('click');//当unbing()为空时,删除元素上所有事件。

    10.几个有用的jquery方法(参考 柔城 博客园 http://www.cnblogs.com/sosoft/p/3543432.html)

           $.browser.浏览器类型:检测浏览器类型。有效参数有:safari,opera,msie,mozilla。

    检测是否为ie:$.browser.isie;

           $.each(obj,fn):通用的迭代函数。

     例:$.each([0,1,2],function(){alert('iter#'+i+':'+n);});

    等同于:

    var arr=[0,1,2];

    for(var i=0;i<arr.length;i++){

       alert(''item#)+i+':'+arr[i];

    }

           $.map(array,fn):数组映射。把一个数组中的项目(处理转换后)保存到另一个新数组中,并返回生成的新数组。

    var newArr=$.map([0,1,2],function(i){return i+1;});

    返回值为:[1,2,3];

            $.merge(arr1,arr2):合并两个数组并删除重复的项目。

    $.merge([0,1,2],[2,3,4])  //返回[0,1,2,3,4]

            $.trim(str):删除字符串两端的空白字符。

    $.trim('   hi   ');  //返回   'hi';

    11.noConflict()的使用

    为了避免$方法与其他js类库使用同一方法发生冲突,使用noConflict()避免冲突。

    jQuery.noConflict();

    jQuery('div').hide();

  • 相关阅读:
    Markdown文字添加颜色
    深度学习基础——感知机
    Markdown插入表格语法
    卷积神经网络CNN学习笔记
    python 安装离线库
    无法定位程序输入点到xxx.dll
    XMind配置防火墙
    简书 markdown 代码高亮标记
    clion ctrl+鼠标左键不能调到函数实现
    D
  • 原文地址:https://www.cnblogs.com/lionisnotkitty/p/5967907.html
Copyright © 2020-2023  润新知