JQ初学习（简介，使用，选择器）

1.JQuery简介

1.1 jQuery是一个JavaScript函数库。

1.2jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

1.3jQuery库包含以下功能：

HTML 元素选取,HTML 元素操作,CSS 操作,HTML 事件函数,JavaScript 特效和动画,HTML DOM 遍历和修改,AJAX,Utilities

2.如何使用JQuery

2.1 本地文件引入

script 标签引入

<script src="jquery-1.10.2.min.js"></script>

2.2 CDN（内容分发网络） 引用

//百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
//新浪CDN
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
//谷歌CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
//Microsoft CDN
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

3.文档就绪事件

JQ

$(document).ready(function(){
   // 开始写 jQuery 代码...
});


//简易写法
$(function(){
   // 开始写 jQuery 代码...
});

JS

window.onload=function(){
// 开始写 JavaScript 代码...
}

jQuery 入口函数与 JavaScript 入口函数的区别:

4. jQuery选择器

基本选择器	作用
$(’#id’)	根据给定的ID匹配一个元素。
$(‘element’)	根据给定的元素标签名匹配所有元素
$(’.class’)	根据给定的css类名匹配元素
$(’ * ')	匹配所有元素
$(‘selector1,selector2,selectorN’)	任意多个有效选择器

层级选择器	作用
$(‘ancestor descendant’)	在给定的祖先元素下匹配所有的后代元素
$(‘parent > child’)	在给定的父元素下匹配所有的子元素
$(‘prev + next’)	匹配所有紧接在 prev 元素后的 next 元素
$(‘prev ~ siblings’)	匹配 prev 元素之后的所有 siblings 元素

基本筛选器	作用
$(’ :first’)	获取第一个元素
$(’:last’)	获取最后个元素
$(’:not(selector)’)	去除所有与给定选择器匹配的元素
$(’:even’)	匹配所有索引值为偶数的元素，从 0 开始计数
$(’:odd’)	匹配所有索引值为奇数的元素，从 0 开始计数
$(’:gt(index)’)	匹配所有大于给定索引值的元素
$(’:lt(index)’)	匹配所有小于给定索引值的元素
$(’:header’)	匹配如 h1, h2, h3之类的标题元素
$(’:animated’)	匹配所有正在执行动画效果的元素
$(’:focus’)	匹配当前获取焦点的元素

内容选择器	作用
$(’:contains(text)’)	匹配包含给定文本的元素
$(’:header’)	匹配所有不包含子元素或者文本的空元素
$(’:has(selector)’)	匹配含有选择器所匹配的元素的元素
$(’:parent’)	匹配含有子元素或者文本的元素

可见性选择器	作用
$(’:hidden’)	匹配所有不可见元素，或者type为hidden的元素
$(’:visible’)	匹配所有的可见元素

属性选择器	作用
$(’[attribute]’)	匹配包含给定属性的元素
$(’[attribute！=value]’)	匹配给定的属性是某个特定值（或不是某个特定值）的元素
$(’[attribute^=value]’)	匹配给定的属性是以某些值开始的元素
$ (’[attribute$=value]’)	匹配给定的属性是以某些值结尾的元素
$(’[attribute*=value]’)	匹配给定的属性是以包含某些值的元素
$(’[selector1][selector2][selectorN]’)	复合属性选择器，需要同时满足多个条件时使用

子元素选择器	作用
$(’:first-child’)	匹配所给选择器( :之前的选择器)的第一个子元素
$(’:first-of-type’)	结构化伪类，匹配E的父元素的第一个E类型的孩子，等价于:nth-of-type(1) 选择器
$(’:last-child’)	匹配最后一个子元素
$(’:last-of-type’)	结构化伪类，匹配E的父元素的最后一个E类型的孩子
$(’:nth-child’)	匹配其父元素下的第N个子或奇偶元素
$(’:nth-last-child’)	选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
$(’:nth-last-of-type’)	选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
$(’::nth-of-type’)	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
$(’:only-child’)	如果某个元素是父元素中唯一的子元素，那将会被匹配
$(’:only-of-type’)	选择所有没有兄弟元素，且具有相同的元素名称的元素。
$(’:parent’)	匹配含有子元素或者文本的元素
$(’:parent’)	匹配含有子元素或者文本的元素

表单选择器	作用
$(’:input’)	查找所有的input元素，下面这些元素都会被匹配到。
$(’:text’)	匹配所有的单行文本框
$(’:password’)	匹配所有密码框
$(’:radio’)	匹配所有单选按钮
$(’:checkbox’)	匹配所有复选框
$(’:submit’)	匹配所有提交按钮，
$(’:image’)	匹配所有图像域
$(’:reset’)	匹配所有重置按钮
$(’:button’)	匹配所有按钮
$(’:file’)	匹配所有文件域

4.1 $ (‘ancestor descendant’) 和 $ (‘parent > child’)的区别

<ul id='list'>
    <li>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li></li>
    <li></li>
  </ul>
  <script>
    console.log($('#list li'));
    console.log($('#list>li'));
  </script>