jquery总结(待更新)

首先要添加jquery库

<script type="text/javascript" src="jquery.js"></script>

选择器:

基本:

$("\*"): 所有元素
$("#lastname"): id=”lastname” 的元素
$(".intro"): 所有 class=”intro” 的元素
$("p"): 所有<p>元素
$(".intro.demo"): 所有 class=”intro”且 class=”demo” 的元素
$("th,td,.intro"): 所有带有匹配选择的元素

层级:

$("parent > child"): 这个子元素组合器(E > F)和(E F)都作为后代组合,但是他们有所不同,更具体的是(E > F)它只会选择第一级的后代。
$("ancestor descendant"): 即(E F)一个元素的后代可能是该元素的一个孩子,孙子,曾孙等。
$( "prev + next" ): 用于筛选紧跟在 “prev” 后面的元素的选择器。其中重要的一点既要考虑下一个相邻兄弟选择器( prev + next )和一般兄弟选择器(prev ~ siblings )所选择到的元素,必须在同一个父元素下。
$( "prev ~ siblings" ): 一个选择器来过滤第一选择器以后的兄弟元素,跟随其的所有同级元素。

基本筛选:

$("p:first"): 第一个 <p> 元素
$("p:last"): 最后一个 <p> 元素
$("tr:even"): 所有偶数

元素

$("tr:odd"): 请输入代码)所有奇数 元素

$("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>

$(":animated"): 所有动画元素

内容筛选:

$(":contains('W3School')"): 包含指定字符串的所有元素
$(":empty")无子(元素): 节点的所有元素
$(":has(selector)"): 如果表达式 $('div:has(p)') 匹配一个 <div>,那么应有一个<p>存在于 <div>后代元素中的任何地方,不是直接的子元素也可以。

可见性筛选:

$("p:hidden"): 所有隐藏的<p>元素
$("table:visible"): 所有可见的表格

属性选择器:

$("[href]"): 所有带有 href 属性的元素
$("[href='#']"): 所有 href 属性的值等于 “#” 的元素
$("[href!='#']"): 所有 href 属性的值不等于 “#” 的元素
$("[href$='.jpg']"): 所有 href 属性的值包含以 “.jpg” 结尾的元素
$("input[name~='man']"): 查找所有属性中含有 ‘man’ 这个单词的文本框,并且修改其文本值
$("input[name$='letter']"): 查找所有的属性名称以“letter”的结束,并把他们的文字输入
$("input[name^='letter']"): 选择指定属性是以给定字符串(letter)开始的元素
$("input[id][name$='man']"): 查找那些有 id 属性,并且 name 属性以 man 结尾的输入框

表单:

$(":input"): 所有 <input> 元素
$(":text"): 所有 type=”text” 的 <input> 元素
$(":password"): 所有 type=”password” 的 <input> 元素
$(":radio"): 所有 type=”radio” 的 <input> 元素
$(":checkbox"): 所有 type=”checkbox” 的 <input> 元素
$(":submit"): 所有 type=”submit” 的 <input> 元素
$(":reset"): 所有 type=”reset” 的 <input> 元素
$(":button"): 选择所有按钮元素和 type=”button” 的 <input> 元素
$(":image"): 所有 type=”image” 的 <input> 元素
$(":file"): 所有 type=”file” 的 <input> 元素
$(":enabled"): 所有可用的 <input>元素(未被禁用的元素)
$(":disabled"): 所有禁用的 <input>元素
$(":selected"): 所有被选取的 <input>元素
$(":checked"): 所有被选中的 <input>元素(被勾选的元素)
$(":focus"): 选择当前获取焦点的元素

事件:

浏览器事件

  • .resize()
    当浏览器window的尺寸改变时,window元素上绑定的resize事件将被触发
    当窗口大小改变时(或改变后),查看窗口的宽度:

    $(window).resize(function() {
        $('body').prepend('<div>' + $(window).width() + '</div>');
    });
  • scroll()

    当用户在元素内执行了滚动操作,就会在这个元素上触发scroll事件。
    $(window).scroll(function () {
        $("span").css("display", "inline").fadeOut("slow");
    });

事件绑定

  • .on()
    方法是将事件处理程序绑定到文档(document)的首选方法. .on()方法事件处理程序到当前选定的jQuery
    对象中的元素。
    在jQuery1.7中,.on()方法 提供绑定事件处理的所有功能。为了帮助从旧的jQuery事件方法转换过来,查
    看.bind(), .delegate(), 和 .live().要删除的.on()绑定的事件,请参阅.off()。要绑定一个事件,并
    且只运行一次,然后删除自己, 请参阅.one(). (on()取代bind()delegate())

    Example: 通过使用 .stopPropagation(),防止提交事件的冒泡行为,但是并不禁止提交行为。

    $("form").on("submit", function(event) {
      event.stopPropagation();
    });
  • .off() off()方法移除用.on()绑定的事件处理程序。

  • .bind() 向匹配元素附加一个或更多事件处理器

    $('#foo').bind('click', function() { alert('User clicked on "foo."');});
  • .trigger()
    trigger()函数用于**在每个匹配元素上触发指定类型的事件。
    此外,你还可以在触发事件时为事件处理函数传入额外的参数。
    使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。
    以表单元素<form>为例,使用trigger("submit")可以触发该表单绑定的submit事件,也会执行表单
    submit事件的默认行为——表单提交操作。

表单事件

  • .blur() 一个元素失去焦点将触发blur事件。
    起初,这个事件仅适用于表单元素,如元素<input>。在最新的浏览器中,这个事件适用范围已经扩大到
    包括所有元素类型。一个元素可以通过键盘命令失去焦点,比如tab键,或用鼠标点击网页上的其他地方。

    $('#target').blur(function() { alert('Handler for .blur() called.');});
  • .change()触发、或将函数绑定到指定元素的 change事件
    一个元素的值改变的时候将触发change事件。此事件仅限用于<input>元素,<textarea><select>
    元素。对于下拉选择框,复选框和单选按钮,当用户用鼠标作出选择,该事件立即触发,但对于其他类型
    的input元素,该事件触发将推迟,直到元素失去焦点才会触点。

    $('.target').change(function() {
        alert('Handler for .change() called.');
    });
  • .click()触发、或将函数绑定到指定元素的 click 事件

  • .dblclick()触发、或将函数绑定到指定元素的 double click 事件一个元素被双击时将触发 dblclick事件。任何HTML元素都可以收到此事件。

    $('#target').dblclick(function() {
        alert('Handler for .dblclick() called.');
    });
    原文作者:於见
    原文地址: https://segmentfault.com/a/1190000004456062
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞