• jquery常用总结



    一。选择器优先级:
    1.最高优先级是 (直接在标签中的设置样式,假设级别为1000)<div style="color:Red;"></div>
    2.次优先级是(ID选择器 ,假设级别为100) #myDiv{color:Red;}
    3.其次优先级是(类选择器,假设级别为10) .divClass{color:Red;}
    4.最后优先级是 (标签选择器,假设级别是 1) div{color:Red;}
    5.那么后代选择器的优先级就可以计算了啊
    比如 .divClass span { color:Red;} 优先级别就是:10+1=11

    二。jquery优先级
    jquery 是没有优先级的,jquery是按照你的条件遍历一次DOM tree,所以写条件的时候最好尽量缩小范围和用ID,避免要遍历全部DOM,这样效率是最快的
    比如$('#idA'),$('div .classA'),$('.classA'),效率最好的是$('#idA'),而$('div .classA')又比$('.classA')的效率高,最后一个效率是最低的,因为jquery会遍历整个TREE

    三。jquery选择器
    元素选择器
    $("p.xxx") 选取所有class="intro"的<p>元素
    $("p#demo") 选取所有id="demo"的<p>元素
    $(".intro.demo")所有 class="intro" 且 class="demo" 的元素
    $("p:first") 第一个 <p> 元素
    $("p:last") 最后一个 <p> 元素
    $("tr:even") 所有偶数 <tr> 元素
    $("tr:odd") 所有奇数 <tr> 元素
    $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
    $("ul li:gt(3)") 列出 index 大于 3 的元素
    $("ul li:lt(3)") 列出 index 小于 3 的元素
    $("input:not(:empty)") 所有不为空的 input 元素
    $(":header") 所有标题元素 <h1> - <h6>
    $(":contains('W3School')") 包含指定字符串的所有元素
    $(":empty") 无子(元素)节点的所有元素
    $("p:hidden") 所有隐藏的 <p> 元素
    $("table:visible") 所有可见的表格
    $("th,td,.intro") 所有带有匹配选择的元素
    $("[href]") 所有带有 href 属性的元素
    $(":input") 所有 <input> 元素
    $(":radio") 所有 type="radio" 的 <input> 元素(radio可换成text,submit...)
    $(":enabled") 所有激活的 input 元素
    $(":disabled") 所有禁用的 input 元素
    $(":selected") 所有被选取的 input 元素
    $(":checked") 所有被选中的 input 元素
    属性选择器
    $("[href]") 选取所有带href属性的元素
    $("[href='#']")选取所有带有href值等于#的元素
    $("[href!='#']")选取所有带有href值不等于#的元素
    $("[href$='.jpg']")选取所有href值以".jpg"结尾的元素

    CSS选择器
    $("p").css("background-color", "red");

    $("ul li:first")每个<ul>的第一个<li>元素
    $("div#xxx .yyy")id="xxx" 的 <div> 元素中的所有 class="yyy" 的元素

    四。jquery事件
    $(document).ready(function(){});
    $("button").click(function(){}); 触发或将函数绑定到被选元素的点击事件
    $("#xxx").val();
    $("#xxx").text();
    $("#xxx").html();
    var jq=jQuery.noConflict();用自己的名称(比如 jq)来代替 $ 符号。
    $(selector).dblclick(function);触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

    五。效果
    1.显示隐藏
    $("p").hide();
    $("p").show();
    $("p").toggle();显示被隐藏的元素,并隐藏已显示的元素:
    $(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
    2.下面是四个淡入淡出,可选参数speed,callback:
    fadeIn()
    fadeOut()
    fadeToggle()
    $(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度(值介于 0 与 1 之间)。
    3.滑动
    $(selector).slideDown(speed,callback);下
    $(selector).slideUp(speed,callback);上
    $(selector).slideToggle(speed,callback);如果上就下,下就上
    4.动画
    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    例:$("button").click(function(){
    $("div").animate({left:'250px'});
    });
    复杂一点:
    $("button").click(function(){
    $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    '150px'
    });
    });
    使用相对值
    $("button").click(function(){
    $("div").animate({
    left:'250px',
    height:'+=150px',
    '+=150px'
    });
    });
    预定义值
    $("button").click(function(){
    $("div").animate({
    height:'toggle'或者"show"、"hide"
    });
    });
    队列
    $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({'100px',opacity:'0.8'},"slow");
    });
    5.
    $(selector).stop(stopAll,goToEnd); 方法用于停止动画或效果,在它们完成之前
    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
    6.chain
    Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

    六。ajax
    url
    type
    timeout
    async 所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false
    cache
    data
    dataType xml,html,script,json,jsonp,text
    beforeSend 要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头
    complete 要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)
    success 请求成功后调用的回调函数,有两个参数。(1)由服务器返回,并根据dataType参数进行处理后的数据。(2)描述状态的字符串。
    error 请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
    contentType 当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。
    dataFilter 给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数
    global 默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。
    ifModified 默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。
    jsonp
    username
    password
    processData
    scriptCharset

    $.each()以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。

    七。添加元素
    append() - 在被选元素的结尾插入内容 $("p").append(txt1,txt2,txt3);
    prepend() - 在被选元素的开头插入内容
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容

    八。遍历
    parent() 方法返回被选元素的直接父元素。
    parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。$("span").parentsUntil("div");
    children() 方法返回被选元素的所有直接子元素
    find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
    siblings() 方法返回被选元素的所有同胞元素。
    next() 方法返回被选元素的下一个同胞元素。
    nextAll() 方法返回被选元素的所有跟随的同胞元素
    nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:
    first() 方法返回被选元素的首个元素。
    last() 方法返回被选元素的最后一个元素。
    eq() 方法返回被选元素中带有指定索引号的元素。
    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回$("p").filter(".intro");返回带有类名 "intro" 的所有 <p> 元素:
    not() 方法返回不匹配标准的所有元素。

    九。通配符
    *=包含xx $= 以xx结束 ^=以xx开始

    十。获取以及设置
    $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
    });
    });
    html();
    val();
    attr();
    十一。删除
    empty() 方法删除被选元素的子元素
    remove() 方法也可接受一个参数,允许您对被删元素进行过滤。$("p").remove(".italic");删除所有clss="italic"的所有p
    十二。样式
    addClass() - 向被选元素添加一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作
    css() - 设置或返回样式属性
    css({"propertyname":"value","propertyname":"value",...});

    十三。尺寸
    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()
    十四。ajax
    1.$(selector).load(URL,data,callback);从服务器加载数据,并把返回的数据放入被选元素中。
    $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
    })
    $("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
    可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
    responseTxt - 包含调用成功时的结果内容
    statusTXT - 包含调用的状态
    xhr - 包含 XMLHttpRequest 对象
    2.$.get(URL,callback);通过 HTTP GET 请求从服务器上请求数据。
    3.$.post(URL,data,callback);通过 HTTP POST 请求从服务器上请求数据。

  • 相关阅读:
    Android中使用HttpURLConnection实现GET POST JSON数据与下载图片
    BZOJ 1293 SCOI2009 生日礼物 堆
    Git小玩
    VM tools安装错误The path &quot;&quot; is not a valid path to the xx generic kernel headers.
    css hover对其包括的元素进行样式设置
    C#高级编程---暂停计划
    如何配置和使用Tomcat访问日志
    关于性能测试应该知道的一些事(转载)
    Linux 平台如何查看某个进程的线程数?
    《让LoadRunner走下神坛》
  • 原文地址:https://www.cnblogs.com/handsomecui/p/7236194.html
Copyright © 2020-2023  润新知