jquery笔记1–拔取器

一.概述:
jQuery是叁个神速、简洁的JavaScript框架,是继Prototype之后又一个良好的JavaScript代码库(或JavaScript框架)。jQuery设计的大旨是“write
Less,Do
More”,即倡导写更少的代码,做越多的工作。它封装JavaScript常用的听从代码,提供一种便民的JavaScript设计格局,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的基本个性可以总计为:具有尤其的链式语法和短小清晰的多职能接口;具有高效灵活的css拔取器,并且可对CSS采用器进行增添;拥有便捷的插件增添机制和添加的插件。jQuery包容各类主流浏览器,如IE
6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

二.使用:
1:下载;网址:Jquery.com
2:在html页面中选取script标签,引入js文件即可;注意一定要先引入jquery,再引入本身写的js;
< script type=”text/javascript”
src=”js/jquery-3.2.1.js”></script>
3:再利用script标签,写程序员本身的js代码;

三.Jquery对象与js对象的界别和转换
1.js对象==>jquery对象,格式:$(js对象);
2.jquery==>js对象,格式:jquery对象[0];

四.jquery API介绍
API分为核心/属性/CSS/拔取器/文档处理/筛选/事件/效杲/ajax/工具/event对象,共1二个部分

选择器:
1.中坚采用器
    Id选择器:
    $(“#id的值”);
   
    成分采取器:
    $(“标签名”);
   
    类拔取器:
    $(“.class的属性值”);
   
    *选择器
    $(“*”)
    匹配全部因素并回到

2.层级采用器:
    ancestor descendant(迭代同盟)
        ancestor:为别的有效采取器;
        descendant:匹配成分的选取器,且为首个拔取器的儿孙;
    举例:
    $(“form input”)
    匹配form标签下拥有的input标签(迭代–进入孙代或更后代的价签)
   
    parent > child(仅接纳直系一代的拔取器,不迭代拔取)
        parent:任何有效的采纳器;
       
child:用以匹配元素的选用器,并且它是率先个选拔器的子成分(不进来迭代);
    举例:
    $(“form > input”)
   
    prev + next
    匹配全部紧接在 prev 成分后的 next
成分.注意prev与next成对出现时才匹配;
    举例:
    $(“label + input”)
   
    prev ~ siblings
    匹配与第3个标签同辈的竹签
    举例:
    $(“form ~ input”)
   
3.着力过滤拔取器
    :first
    获取第一个因素
    举例:
    $(‘li:first’);
    重返li标签中的第三个li标签对象([ <li>list item 1</li>
])
   
    :last
    获取最终二个成分(API中后边有1个圆括号,应除去)
    举例:
    $(‘li:last’)
    返回:[ <li>list item 5</li> ]
   
    :not(selector)
    去除全部与给定选拔器匹配的成分
    举例:
    $(“input:not(:checked)”)
   
    :even
    匹配全体索引值为偶数的成分,从 0 起首计数
    举例:
    $(“tr:even”)
    重回索引为偶数的行;
   
    :odd
    匹配全部索引值为奇数的要素,从 0 开头计数
    $(“tr:odd”)
    再次来到全体索引为奇数的行;
   
    :eq(index)
    匹配多个给定索引值的因素,从0先河计数
    $(“tr:eq(1)”)
    重回索引值为1的因素(即第叁行)
   
    :gt(index)
    匹配全数大于给定索引值的因素,从0初步计数
    $(“tr:gt(0)”)
    匹配索引值大于0的行;
   
    :lt(index)
    匹配全部小于给定索引值的要素
    $(“tr:lt(2)”)
    匹配索引值小于2的行;
   
    :header
    匹配如 h1, h2, h3之类的标题成分
    $(“:header”).css(“background”, “#EEE”);
    给页面内全体标题加上背景象
   
    :focus
    匹配当前赢得关节的成分
   
4.属性相关接纳器
    []
    $(“div[id]”)
    查找全数含有 id 属性的 div 元素
   
    [attribute=value]
    $(“input[name=’newsletter’]”)
    查找全数 name 属性是 newsletter 的 input 成分
   
    [attribute!=value]
    查找全数 name 属性不是 newsletter 的 input 成分
    $(“input[name!=’newsletter’]”)
   
    [attribute^=value]
    匹配给定的质量是以有个别值初叶的成分
    $(“input[name^=’news’]”)
    查找全数 name 以 ‘news’ 开端的 input 成分
   
    [attribute$=value]
    匹配给定的品质是以有些值结尾的要素
    $(“input[name$=’letter’]”)
    查找全部 name 以 ‘letter’ 结尾的 input 成分
   
    [attribute*=value]
    匹配给定的品质是以带有某个值的因素
    $(“input[name*=’man’]”)
    查找全体 name 包罗 ‘man’ 的 input 成分

5.表单相关选取器
    :input
    匹配全数 input, textarea, select 和 button 成分
    $(“:input”)
    查找全体的input成分,
   
    :text
    匹配全部的单行文本框
    举例:
      <input type=”text” />
      <input type=”checkbox” />
      <input type=”radio” />
      <input type=”image” />
      <input type=”file” />
      <input type=”submit” />
      <input type=”reset” />
      <input type=”password” />
      <input type=”button” />
    $(“:text”)
    返回:[ <input type=”text” /> ]
   
    $(“:password”)
    匹配全数密码框
   
    $(“:radio”)
    查找全体单选按钮
   
    $(“:checkbox”)
    匹配全体复选框
   
    $(“:submit”)
    匹配全部提交按钮
   
    $(“:image”)
    匹配全体图像域
   
    $(“:reset”)
    查找全体重置按钮
   
    $(“:button”)
    匹配全数按钮
   
    $(“:file”)
    查找全部文件域
   
    :hidden
Ajax,    匹配全数不可见成分,只怕type为hidden的要素
    举例
    $(“tr:hidden”)
    $(“input:hidden”)

6.表单对象属性选用器
    :enabled
    匹配全数可用成分
    举例
    $(“input:enabled”)
   
    :disabled
    匹配全部不可用成分
    $(“input:disabled”)
    查找全体不可用的input成分
   
    :checked
    匹配全数入选的被选中成分(复选框、单选框等,不包含select中的option)
    $(“input:checked”)
    查找全部入选的复选框成分
   
    :selected
    匹配全数入选的option成分
    $(“select option:selected”)
    查找全体入选的选项因素
   
     

 

相关文章