# jquery

# jquery 是什么？

jquery是一种非常流行的js库，它有采用css选择器的方案查找dom元素，它的宗旨是写的少，做的多。

# jquery 优势是什么？

查找dom非常方便
支持链式操作
兼容性很好
js自定义动画化
封装了xhr对象(ajax)
提供插件机制

# jquery 下载

jquery各项版本

版本越高，兼容性越低。

如果要考虑更多兼容，请使用2.0之前的版本。

教学采用的版本是 jquery1.10.2.js

# jquery 部署安装

<body>
  <script src="js/jquery1.10.2.js"></script>
</body>
</html>

# jquery中的工厂函数

$是jquery中的工厂函数，因为通过$(对象|字符串)生成一个jq对象。

$(window)
$(document)
$('#h2')
$('.box')
$('h2')
$('[name="box"]')

只有jq对象才能使用jq的属性和方法原生js对象不能使用jq的属性和方法 jq对象可以转成js原生对象，js原生对象可以转换jq对象 jq对象本质上就一个类数组对象

//js原生对象转换为 jq对象
var h2 = document.getElementById('h2');
var $h2 = $(h2);
console.log( $h2 );

//jq对象 转换为js原生对象
var $h2 = $('#h2');
var h2 = $h2[0];

# jquery中的dom初始化

js原生dom初始化（页面载入完毕）是什么？

window.onload = function(){

}

jq中dom初始化：

css已经解析完毕，元素已经在文档中创建，元素也具备宽和高（图片除外）、偏移等，不必等到图片载入完毕。

jq的dom初始化比原生的onload执行时间要早

//完整版
$(document).ready(function(){

})

//缩写版
$(function(){

})

window.onload 和 $(document).ready的区别？

$(document).ready执行时间要比window.onload更早
$(document).ready可以使用多个，代码会合并执行，window.onload只能使用一个，后面的覆盖前面的window.onload。

# jq 选择器

jQuery3.3.1 API 中文文档

# 基本

id 选择器
类选择器
标签选择
- 通配符选择器（*表示所有）
多个选择器

  
  <h4>标题2</h4>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
  <p>段落</p>
  <div>
    <button>按钮</button>
    <p>段落</p>
  </div>
  <h2 class="h2" id="h2" name="h2">标题2</h2>

  <script src="js/jquery1.10.2.js"></script>
  <script>
  $(function(){
    $('#h2').css('color','red');
    $('.h2').css('color','green');
    $('h2').css('color','blue');
    $('[name="h2"]').css('color','orange');
    $('h2,h4').css('color','yellow');
    $('li,p,button').css('color','red');
  })
  </script>

# 层级

父元素后代元素
父元素 > 直接子元素
目标元素 + 同辈紧相邻下一个元素
目标元素 ~ 同辈下一个所有元素

# 基本筛选器

:first ：查找第一个
:not(selector)：排除选择器中以外的
:even：查找偶数
:odd：查找奇数
:eq(index)：查找指定索引值
:gt(index)：查找大于指定索引值（不包含自己）
:lt(index)：查找小于指定索引值（不包含自己）
:last：查找最后一个
:header：查找所有的标题（h1~h6）
:animated: 所有正在执行动画效果的元素
:focus：匹配当前获取焦点的元素。
:root: 永远是<html>元素。
:target: 锚点链接和目标锚点相匹配，返回目标锚点对象

# 内容

:contains(text)：查包含某文本的元素
:empty：所有不包含子元素或者文本的空元素，空格也算（文本节点）
:has(selector)：含有选择器所匹配的元素的元素
:parent：含有子元素或者文本的元素

  <input id="keyword" type="search" placeholder="输入关键字">
  <ul class="nav">
    <li>网站首页</li>
    <li>关于</li>
    <li>联系</li>
    <li>收藏首页</li>
    <li>留言</li>
  </ul>

  <script src="js/jquery1.10.2.js"></script>
  <script>
  $(function(){
    $('#keyword').on('input',function(){
      $('.nav li').css('color','');
      if(!this.value) return;
      $('.nav li:contains('+this.value+')').css('color','red');
    })
  })
  </script>

# 可见性

:hidden：所有不可见元素（不是透明度为0，visibility: hidden），或者type为hidden的元素，display:none 也为不可见，不可见元素主要体现在不在文档流，不占任何位置。
:visible：匹配所有的可见元素

# 属性

[attribute] 查找包含某个属性
[attribute=value] 查找包含某个属性，并且该属性等于具体值
[attribute!=value] 查找包含某个属性不等于具体值的元素
[attribute^=value] 查找属性值以什么开头
[attribute$=value] 查找属性值以什么结尾
[attribute*=value] 查找属性值包含什么值
[attrSel1][attrSel2][attrSelN] 查找多个条件属性

# 子元素

:first-child 查找第一个子元素，比如:first范围要广，它找的所有后代元素的第一个元素。
:last-child 查找最后一个子元素，比如:last范围要广，它找的所有后代元素的最后一个子元素。
:first-of-type
:nth-child 查找指定序号的元素，从1开始计算（从上往下数）
nth-last-child 查找指定序号的元素，从1开始计算（从下往上数）

# 表单

:input 所有 input, textarea, select 和 button 元素
:text 匹配单行文本框
:password 匹配密码框
:radio 匹配单选框
:checkbox 匹配复选框
:submit 匹配提交按钮 input type="submit" button type="submit"
:reset 匹配重置按钮
:button 匹配普通按钮
:file 匹配上传文件框
:image 匹配图像域

# 表单对象属性

:enabled 匹配所有可用元素
:disabled 匹配不可以元素
:checked 匹配选中元素（单选框、复选框）
:selected 匹配选中元素（下拉列表框）

← 原生js