jQuery

jQuery 的简介

1. 插件：一个功能高度分装
1. 类库：工具库，提供操作工具，不提供具体功能 jQuery 是一个工具集合
1. 框架：项目每一个组件都会提供出来。我们只需要引入框架语法，即可实现功能
1. DOM 操作多 jQuery
1. 数据渲染不多 jQuery
1. 数据渲染不多 View React
优点：
- 1. 无所不能的选择器
- 1. 无所不在的链式编程
- 1. 无人能及的隐式资迭代
引入jquery以后
=> 会向全局暴露两个变量名
-> 1. jQuery
-> 2. $

jQuery 的构成

1. jquery 的选择器
- 选择器
  => 对元素的获取
  => 基本选择器
  => 特殊选择器
- 筛选器
  => 对已经获取到的元素集合进行二次筛选
- 选择器(基本选择器)
  - 语法： $(选择器)
  - 返回值：满足条件的所有元素(id)选择器除外
    => 放在一个数组里返回
    => 都是一个集合的形式
    => 我们管这个集合叫做jquery元素集合
  - 你的css如何捕获标签，这里就可以怎么填参数
- 选择器(特殊选择器)
  - 语法 : $(选择器)
    => 对你已经存在的选择器进行修饰
  - 1. :first 拿到所有div的第一个
  - 1. :last 最后一个
  - 1. :eq(数字) 按照索引排列的第几个从 0 开始
  - 1. :odd 按照索引排列的奇数个
  - 1. :even 按照索引排列的偶数个
jquery 的选择器详解
- 1. #id

    $('#id 名');

1. element

    $("元素名称");

1. .class

    $('.类名');

1. selector1, selector2, …

    // 有一个特点，就是按照页面结构从上到下的选择元素，跟$里面的元素顺序无关$('元素1, 元素2, ...');

1. ancestor descendant 后代选择器

    <div class="div"><div class='div1'></div><div class='div1'></div></div>$('后代选择器');$('div div1');// 选中div下的所有 类名为div1的元素

1. parent>child

    $('div>div1');

1. prev + next
  一个有效选择器并且紧接着第一个选择器

    <form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />$("label + input")// [ <input name="name" />, <input name="newsletter" /> ]

1. prev~siblings
  匹配 prev 元素之后的所有 siblings 元素

    $("form ~ input")// [ <input name="none" /> ]

1. :first 获取第一个元素
1. :not 去除所有与给定选择器匹配的元素
1. :even 获取偶数项从0开始计数
1. :odd 获取奇数项从0开始计数
1. :eq(index) 获取下标为index的元素
1. :gt(index) 获取所有大于给定索引值的元素
1. :lang(language) 获取指定语言的所有元素

<!DOCTYPE html>
<html>
<head><style>body { background-color: #ccc; }h3 { margin: .25em 0; }div { line-height: 1.5em}.usa { background-color: #f00; color: #fff; }.usa .usa { background-color: #fff; color: #000; }.usa .usa .usa { background-color: #00f; color: #fff; }.spain { background-color: #f00; color: #ff0; }.spain .spain { background-color: #ff0; color: #f00; line-height: 3em; }.spain .spain .spain { background-color: #f00; color: #ff0; line-height: 1.5em; }
</style><script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body><h3>USA</h3><div lang="en-us">red<div>white<div>and blue</div></div></div><h3>España</h3><div lang="es-es">rojo<div>amarillo<div>y rojo</div></div></div><script>$( "div:lang(en-us)" ).addClass( "usa" );$( "div:lang(es-es)" ).addClass( "spain" );</script></body>
</html>

1. :last 获取匹配的最后个元素

    <ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li></ul>$('li:last')//[ <li>list item 5</li> ]

1. :lt(index) 匹配所有小于给定索引值的元素

    <table><tr><td>Header 1</td></tr><tr><td>Value 1</td></tr><tr><td>Value 2</td></tr></table>$('tr:lt(2)');// [ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

1. :header 匹配h1, h2, h3 之类的标题元素
1. :animated 匹配所有正在执行动画效果的元素
1. :focus 匹配当前获得焦点的元素
1. :root 匹配该文档的根元素永远是 html 元素
1. :target 选择由文档URI的格式化识别码表示的目标元素,
  如果文档的URI包含一个格式化的标识符，或hash（哈希），然后:target选择器将匹配ID和标识符相匹配的元素。例如，给定的URI http://example.com/#foo， $( “p:target” )，将选择
  
  元素。
1. :contains(text) 匹配包含给定文本的元素
1. :empty 匹配所有不包含子元素或者文本的空元素
1. :has(selector) 匹配含有选择器所匹配的元素的元素

    <div><p>Hello</p></div><div>Hello again!</div>$("div:has(p)").addClass("test");// [ <div class="test"><p>Hello</p></div> ]

1. :parent 匹配含有子元素或者文本的元素
1. :hidden 匹配所有不可见元素，或者type为hidden的元素
1. :visible 匹配所有可见元素
1. [attribute] 匹配包含给定的元素

    <div><p>Hello！</p></div><div id="test2"></div>$('div[i]')// [ <div id="test2"></div> ]

1. [attribute=value] 匹配给定的属性是某个特定值的元素
1. [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于
  :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
1. [^attribute=value] 匹配给定的属性是以某些值开始的元素比如name=‘news…’ $(‘dom^=news’)
1. [attribute$=value] 匹配给定的属性是以某些值结尾的元素
1. [attribute*=value] 匹配给定的属性是包含某些值的元素
1. [selector1][selector1][selector1]
  复合属性选择器，同时满足

    // 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的<input id="man-news" name="man-news" /><input name="milkman" /><input id="letterman" name="new-letterman" /><input name="newmilk" />$("input[id][name$='man']")// [ <input id="letterman" name="new-letterman" /> ]

jquery 的筛选器
- 对jquery的元素集合进行二次筛选
- 只有jQuery的元素才可以使用，原生DOM对象不能使用
  - 1. first()
      => 拿到元素集合里的第一个
  - 1. last()
      => 拿到元素集合里的最后一个
  - 1. eq(索引)
      => 拿到元素集合里面指定索引那一个
  - 1. next()
      => 当前元素的下一个
  - 1. nextAll()
      => 语法：1. 元素集合.nextAll()
      获取到当前元素的所有兄弟
      => 语法：2. 元素集合.nextAll(选择器)
      获取到当前元素后面所有元素中指定选择器的那一个
  - 1. nextUntil()
      => 语法：元素集合.nextUntil()
      获取到当前元素后面所有的兄弟元素
      => 语法：元素集合.nextUntil(选择器)
      获取到当前元素后面所有的兄弟元素，直到选择器为止前后都不包含
  - 1. prev()
      => 语法：当前元素的上一个元素
  - 1. prevAll, preprevAll(选择器)
      => 语法 1：元素集合.prevAll()
      获取到当前元素上面的所有兄弟元素
      => 语法 2：元素集合.prevAll(选择器)
      获取到当前元素上面的所有兄弟元素的那一个
  - 1. prevUntil()
      => 语法：
      1. 元素集合.pervuntil()
        获取到当前元素元素上面的所有兄的元素
      2. 元素集合.prevUntile 获取到当前元素上面所有的兄弟元素直到选择器元素为止(不包含选择器)
  - 1. parent()
      => 语法：
      获取当前元素的父元素
  - 1. parents()
      => 语法：
      1. 元素集合.parents()
        获取当前元素的所有父元素
      2. 元素集合.parents(选择器)
        拿到结构父级里面所有父元素中符合选择器的那一个元素
  - 1. children() 有多少获取多少
      => 语法：
      1. 元素集合.children()
        拿到该元素的所有子元素
      2. 元素集合.children(选择器)
        拿到该元素的所有子元素中符合选择器的那一个元素
  - 1. sinblings()
      => 拿到该元素的所有兄弟元素，自己除外
  - 1. find(选择器)
      找到该元素中所有后代元素里面符合选择器条件的元素
  - 1. index()
      获取到的就是该元素在父元素里面的索引位置

jQuery 的常用选择器，筛选器相关推荐

jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...
jquery选择器之基本筛选器
HTML示例代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
JQuery 基础（1）—— 基本介绍、选择器、筛选器（选择器的一种）
一.JQuery的基本概念 1.JQuery是什么? jquery是一款javaScript库,能更方便地处理HTML.事件.动画等,可以兼容多浏览器 2.如何选择版本? JQuery有三个大版本: ...
jquery 选择器、筛选器、事件绑定与事件委派
一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...
desc excel 公式_Excel小技巧之Power Pivot Generate函数、高级DAX函数与常用筛选器函数...
一.使用Generate函数创建信息叠加表 [目标:将姓名与月份组合,生成每个月份均有对应姓名对应的表格][基本思路:pivot中创建度量值,利用DAX函数创建链接回表后在EXCEL释放] ...
jq常用过滤器_JQuery的常用选择器、过滤器、方法全面介绍
1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.check ...
Tableau中的筛选器
Tableau中常用的筛选器类型有:数据提取筛选器.数据源筛选器.上下文筛选器.维度筛选器.度量筛选器和表计算筛选器.这些筛选器的执行优先级从高到低依次如下图所示.下面依次对各个筛选器进行介绍. ...
jQuery 选择器和筛选器
1. jQuery 1. 选择器 $("") 1. 基本选择器 1. ID --> $("#d1") 2. 标签名 --> $("p&qu ...

jQuery 的常用选择器，筛选器

jQuery

jQuery 的简介

jQuery 的构成

jQuery 的常用选择器，筛选器相关推荐

最新文章

热门文章