• jquery的学习


    供自己查阅,嫌低级的勿喷!

    1.body加载完后执行

    $(document).ready(function(){
         alert("helloworld");
    });

    2.将DOM对象转换成jquery对象

    var pElement=document.getElementsByTagName("p")[0];
    var pElemenjQuery=$(pElement);

    将jquery对象转换成DOM对象

    var pElementjQuery=$("#p1");
    //第一种方式
    var pElement=pElementjQuery[0];
    //第二种方式
    var pElement=pElementjQuery.get(0);

    3.基本选择器

    选择器   描述 返回 示例
    #id 根据指定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
    .class 根据指定的类名匹配元素 集合元素 $(".test")选取所有class为test的元素
    element 根据指定的元素名匹配元素 集合元素 $("p")选取所有的<p>元素
    * 匹配所有元素 集合元素 $("*")选取所有的元素
    selector1,selector2,.....,selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $("div,span,p.myclass")选取所有的div和span和拥有class是myclass的p标签所有的元素

    4.层次选择器

    选择器 描述 返回 示例
    $("ancestor descendant") 选取ancestor元素里所有descendant(后代)元素 集合元素 $("div span")获取<div>里所有的<span>元素
    $("parent > child") 选取parent元素下所有的child(子)元素 集合元素 $("div > span")获取<div>下子元素是<span>的元素
    $("prev + next") 选取紧接在prev元素后的next元素 集合元素 $(".one + div")获取class是one的元素下一个<div>元素
    $("prev ~ siblings") 选取prev元素后所有的siblings元素 集合元素 $("#one ~ div")获取id是one的元素后面所有的div元素

    其实$(".one + div")就等于$(".one").next("div"),   $("#one ~ div")等于$("#one").nextAll("div")。上面两种都是只能获取后面的元素,而$("#one").siblings("div")则能获取id为one的元素前后的兄弟元素(同辈元素)。

    5.过滤选择器

    选择器 描述 返回 示例
    :first 选取第一个元素 单个元素 $("div:first")选取所有div元素中第一个元素
    :last 选取最后一个元素 单个元素 $("div:last")选取所有div元素中最后一个元素
    :not(selector) 去除所有与selector匹配的元素 集合元素 $("input:not(.myclass)")选取class不是myclass的input元素
    :even 选取索引是偶数的所有元素,索引从0开始 集合元素 $("input:even")选取索引是偶数的input元素
    :odd 选取索引是奇数的所有元素,索引从0开始 集合元素 $("input:odd")选取索引是奇数的input元素
    :eq(index) 选取索引等于index的元素,索引从0开始 单个元素 $("input:eq(1)")选取索引是1的input元素
    :gt(index) 选取索引大于index的元素,索引从0开始 集合元素  
    :lt(index) 选取索引小于index的元素,索引从0开始 集合元素  
    :contains(text) 选取含有文本内容为text的元素 集合元素 $("div:contains('我')")选取含有文本内容'我'的div元素
    :empty 选取不包含子元素或者文本内容的空元素 集合元素  
    :has(selector) 选取含有selector匹配元素的元素 集合元素 $("div:has('p')")选取含有<p>元素的div元素
    :parent 选取含有子元素或者文本的元素 集合元素 $("div:parent")选取含有子元素或者文本内容的div元素
    :hidden 选取所有不可见的元素 集合元素  
    :visible 选项所有可见的元素 集合元素  
    [attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有id属性的div元素
    [attribute=value] 选取属性值为value的元素 集合元素 $("div[title=test]")选取属性title等于test的div元素
    [attribute!=value] 选取属性值不等于value的元素 集合元素  
    [attribute^=value] 选取属性值以value开始的元素 集合元素  
    [attribute$=value] 选取属性值以value结束的元素 集合元素  
    [attribute*=value] 选取属性值含有value的元素 集合元素  
    [selector1][selector2]...[selectorN] 用属性选择器合并成一个复合选择器 集合元素  
    :nth-child(index/even/odd/equation) 选取每个父元素下面第index个子元素或者奇偶元素(索引从1开始) 集合元素 为每一个父元素匹配子元素
    :first-child 选取每个父元素下面第一个元素 集合元素 为每一个父元素匹配子元素,$("ul li:first-child")选取每一个ul中第一个li元素
    :last-child 选取每个父元素下面最后一个元素 集合元素  
    :only-child 如果某个元素是他父元素中唯一一个子元素,那么将被匹配 集合元素 $("ul li:only-child")在ul中选取是唯一一个子元素的li元素
    :enabled 选取所有可用元素 集合元素 $("div:enabled")选取div下所有可用的元素
    :disabled 选取所有不可用元素 集合元素  
    :checked 选取所有被选中的元素(单选框、复选框) 集合元素 $("input:checked")选取所有被选中的input元素
    :selected 选取所有被选中的选项元素(下拉框) 集合元素 $("select:selected")获取所有被选中的选项元素

     6.表单选择器

    选择器 描述 返回 示例
    :input 选取所有input、textarea、select、button元素 集合元素 $(":input")
    :text 获取所有单行文本框 集合元素 $(":text")
    :password 获取所有密码框 集合元素 $(":password")
    :radio 获取所有单选框 集合元素 $(":radio")
    :checkbox 获取所有多选框 集合元素  
    :submit 获取所有提交按钮 集合元素  
    :image 获取所有图像按钮 集合元素  
    :reset 获取所有重置按钮 集合元素  
    :button 获取所有的按钮 集合元素  
    :file 获取所有的上传域 集合元素  
    :hidden 获取所有不可见元素 集合元素  

     注意$("#myfrom: input")和$("#myform input")的区别:前一个获取myform元素下面所有的input、textarea、select、button元素,而后面的只能获取myform下所有的input元素。

    jquery对象常用的方法见下链接:

    http://bbs.csdn.net/topics/330087139

  • 相关阅读:
    基于keepalived双主模型的高可用LVS
    ViewFlipper实现ViewPager的页面切换效果
    C++,Python,Go对照学习-01
    matlab figure 调整大小、字体、线宽
    学术研究 —— 常用结论、说法
    学术研究 —— 常用结论、说法
    OpenGL(十六) 鼠标、键盘交互响应事件
    N+1:创新点的设计
    N+1:创新点的设计
    数学中的物理、几何概念与含义
  • 原文地址:https://www.cnblogs.com/mjsh/p/3267439.html
Copyright © 2020-2023  润新知