jQuery简介和基本选择器

1. 使用<script>引用jQuery源码库文件

        1). 本地引入

        2). 在线远程引入(CDN):

                 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js

                 https://cdn.bootcss.com/jquery/1.9.0/jquery.js

2. 在<script>中调用jQuery核心函数和使用jQuery对象

3.

. jQuery 参数为选择器 ——》DOM对象，function->回调函数，标签——》生成一个DOM元素

. jQuery核心函数

  * 简称: jQuery函数($/jQuery)

  * jQuery库向外直接暴露的就是$/jQuery

  * 引入jQuery库后, 直接使用$即可

    * 当函数用: $(xxx)

    * 当对象用: $.xxx()

. jQuery核心对象

  * 简称: jQuery对象

  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

  * 使用jQuery对象: $obj.xxx()

4：

console.log(typeof  jQuery)//function

$("button").each(function () {

    console.log(this)//this指向便利的dom元素

  })

jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象

基本行为

  * size()/length: 包含的DOM元素个数

  * [index]/get(index): 得到对应位置的DOM元素

  * each(): 遍历包含的所有DOM元素

  * index(): 得到在所在兄弟元素中的下标

5

 基本选择器

  - #id : id选择器

  - element : 元素选择器

  - .class : 属性选择器

  - * : 任意标签

  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)

  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)

  层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器

1. ancestor descendant

  在给定的祖先元素下匹配所有的后代元素

2. parent>child

  在给定的父元素下匹配所有的子元素

3. prev+next

  匹配所有紧接在 prev 元素后的 next 元素

4. prev~siblings

  匹配 prev 元素之后的所有 siblings 元素  ~* *表示后面所有的兄弟元素

选中ul下的class为box的元素后面的所有兄弟元素

  $("ul .box~*").css("color","red")