zoukankan      html  css  js  c++  java
  • jQuery选择器

    选择器1

    jQuery

    1,ready

    当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。
    简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。
    有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
    请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件。
    可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。

    window.load 与 ready 的区别?
    1.执行时间
    window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
    $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
    2.编写个数不同
    window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
    $(document).ready()可以同时编写多个,并且都可以得到执行
    3.简化写法
    window.onload没有简化写法
    $(document).ready(function(){})可以简写成$(function(){});

    2,jquery对象与dom对象之间转换
    A:什么是jquery对象?
    就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。
    B:为什么转换?
    虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。
    C:怎么转换?
    jQuery对象转成DOM对象:
    (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
    (2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象。

    DOM对象转成jQuery对象:
    对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象

    D:文档get方法

    3,基本选择器
    #id
    .class
    element
    *

    4,层次选择器
    $("form input") 选择所有的form元素中的input元素
    $("#main > *") 选择id值为main的所有的子元素
    $("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
    $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签


    5,链式操作方式是指发生在同一个Jquery对象上的一组动作,可直接连写而无需重复获取对象。

    • 选择器二

    1,属性选择器
    $("div[id]") 选择所有含有id属性的div元素
    $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
    $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
    $("input[name^='news']") 选择所有的name属性以'news'开头的input元素
    $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
    $("input[name*='man']") 选择所有的name属性包含'news'的input元素
    $("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
    2,子元素选择器
    $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
    $("div span:first-child") 返回所有的div元素的第一个子节点的数组
    $("div span:last-child") 返回所有的div元素的最后一个节点的数组
    $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
    3,表单对象选择器
    $(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button
    $(":text") 选择所有的text input元素
    $(":password") 选择所有的password input元素
    $(":radio") 选择所有的radio input元素
    $(":checkbox") 选择所有的checkbox input元素
    $(":submit") 选择所有的submit input元素
    $(":image") 选择所有的image input元素
    $(":reset") 选择所有的reset input元素
    $(":button") 选择所有的button input元素
    $(":file") 选择所有的file input元素
    $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
    $(":enabled") 选择所有的可操作的表单元素
    $(":disabled") 选择所有的不可操作的表单元素
    $(":checked") 选择所有的被checked的表单元素
    $("select option:selected") 选择所有的select 的子元素中被selected的元素
    4,筛选
    eq();
    first();
    last();
    hasClass();
    filter();
    is();
    has();
    not();
    children();
    find();
    next();
    parents();
    parent();
    siblings();
    prev();

  • 相关阅读:
    禁止文本被选中
    计算机的发展史及多道技术
    计算机基础知识
    自我介绍
    工作内容1
    在IT行业中的抄袭事件
    哎呀呀
    查看Oracle版本号的方式
    JAVA项目的基本配置
    Ajax请求返回结果为404问题
  • 原文地址:https://www.cnblogs.com/2oex/p/9578572.html
Copyright © 2011-2022 走看看