2019-08-14 jQuery--开始

Markdown语法参考

# 一级标题
## 二级标题
##### 五级标题

- 列表第一项
- 列表第二项

1. 有序列表第一项
2. 有序列表第二项

[标题](链接地址)
[图片上传失败...(image-3b67fc-1565775154628)]

*斜体*
**粗体**
> 引用段落
```
代码块

图片.png

jQuery

JavaScript 库

1.即library 是一个封装好的特定的集合（方法和函数）
------就是一个js文件 如同工具箱一样，里面有锤子钳子 钉子啥的 干活直接用

jQuery

就是为了快速方便的操作DOM 里面基本都是函数（方法）

1.概述

jQuery就是一个快速 简洁的JavaScript库，设计宗旨是“write less Do more”

j就是JavaScript Q是查询 查询js

2.基本使用

jQuery.1 版本 兼容ie 6 7 8
2不兼容 不更新
3不兼容 更新

下载所有版本地址

学习使用开发版 工作使用压缩版

---

2.1jQuery的使用

下载 ==> 复制 ==> 引入
-----这天下终究是属于姓复的

个人样板

---

2.2 使用注意

因为浏览器渲染HTML文档是从上到下的，如果想要使页面加载完毕之后加载我们自己写的代码--

1.写在前面

2.使用

$(function () {
        ...//此处是页面DOM加载完成的入口
})

或者

$(document).ready(function () {
    ...//此处是页面DOM加载完成的入口
})

---

2.3 jQuery的顶级对象$

-----“ 有钱能使鬼推磨，在代码里也是硬通货 ”

1.$是jQuery的别称

2.$同时也是jQuery的顶级对象

---

2.4 jQuery对象和DOM对象

DOM对象就是原生js获取的对象

---var myDiv = document.querySelector('div');

jQuery对象是用jQuery获取的 利用$对DOM对象包装后产生的对象（伪数组形式存储）

---$('div);

两者不可以混用 但可以相互转换

var myDiv = document.querySelector('div');
//---jQuery对象转换为DOM对象

$("div")[index];//index是索引号
$("div")[0];
$('div').get(index);
$('div').get(0);

因为是伪数组形式，所以可以使用数组选择方法

---

3.jQuery的常用API

3.1 jQuery选择器

3.1.1 jQuery选择器

基本和css一样

3.1.2 jQuery设置样式

$('div').css("属性","值")

---

3.1.3 jQuery隐式迭代

就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

---

3.1.4 jQuery 筛选选择器

1. $("li:first") ---获取第一个li元素

2. $("li:last") ---获取最后一个li元素

3. $("li:eq(2)") ---获取索引号为2的li元素

4. $("li:odd/even") ---获取到的li元素中，选择索引号为奇数/偶数的元素

---

3.1.5 jQuery 选取父子元素

1. $('li').parent() ---选择父级元素
   最近一级的父元素

2. ("ul>li")
   $(“ul”).find()

---

3.1..6 jQuery 做一个丑陋的导航条

    
        
        
        
        
    
    
        

            

                微博
                

                    
私信
                    
评论
                    
@我
                
            
            

                微博
                

                    
私信
                    
评论
                    
@我
                
            
            

                微博
                

                    
私信
                    
评论
                    
@我
                
            
            

                微博
                

                    
私信
                    
评论
                    
@我
                
            
        


        
    

---

3.1.7 jQuery 其他选择方法

1.兄弟选择器

假定一个li class = “”myLi“”

$("ol .myLi").siblings("li")
---查找兄弟节点，不包括自己本身

$("ol .myLi").nextAll()
---查找当前元素之后的同辈元素

$("ol .myLi").prevAll()
---查找当前元素之前所有的同辈元素

2.类判断器

$("div").hasClass("protected")
---检查当前的元素是含有某个特定的类，如果有，则返回true

3.第n个元素

$("li").eq(2) ---推荐 索引值可以做变量

---相当于$("li:eq(2)")

---

3.1.8排他思想

    
        
        
        
        
    
    
        
            按钮
        
        
            按钮
        
        
            按钮
        
        
            按钮
        
        
            按钮
        
        
            按钮
        
        
            按钮
        
        
            按钮
        
        
        
    

---

3.1.9 案例：淘宝服饰精品系列

$(this).index()

    
        
        
        
        
        
    
    
        

            

                
111
                
222
                
333
                
444
                
555
                
666
            
            

                

                

                

                

                

                

            
        
        
    

---

3.1.10 jQuery链式编程

$( function () {
   $("button").click(function () {        
$(this).css("color","red").siblings("button").css("color","")
})
})

优雅

跟车链子似的一节一节的按顺序向前滚

---

3.2 jQuery样式操作

3.2.1 操作css方法

1.参数只写属性名 则返回属性值(string)

$('div').css("color")

2 .$("div").css("属性名","属性值")

属性名： 必须加引号
属性值： 如果值是数字 就不用加引号

3.对象

$('div').css({
width:300
height:300
backgroundColor:"red"

---如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})

---不加引号会被当做变量解析

---

3.2.2 jQuery设置类样式方法

---作用等同于以前的classlist，可以操作类样式，注意操作类里面的参数不要加点

1.添加类

$("div").addClass("current")

current是通过点击加上去的

2.删除类

$("div").removeClass("current")

3 切换类

$("div").toggleClass("current")

---

3.2.3 案例：tab栏切换案例

---

----------------------烦-------------------------