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的使用

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

个人样板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            p{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div></div>
        <p></p>
        <script type="text/javascript">
            $('div').hover(function(){
                $('div').css("background-color","yellow")
            },function(){
                $('div').css("background-color","blue")
            })
            
            $("p").hover(function(){
                $("p").css("background-color","yellow");
            },function(){
                $("p").css("background-color","pink");
            });

        </script>
    </body>
</html>

2.2 使用注意

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

1.写在</body>前面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script>自己写的jQuery代码</script>
   </body>
</html>

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. ("li").children() --选择亲儿子 相当于("ul>li")
    $(“ul”).find()

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>丑陋的导航条</title>
        <style type="text/css">
            *{
                list-style: none;
                margin: 20px auto;
                padding: 10px;
            }
            ul li ul{
                display: none;
                background-color: skyblue;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <ul>
            <li>
                <a href="">微博</a>
                <ul>
                    <li><a href="">私信</a></li>
                    <li><a href="">评论</a></li>
                    <li><a href="">@我</a></li>
                </ul>
            </li>
            <li>
                <a href="">微博</a>
                <ul>
                    <li><a href="">私信</a></li>
                    <li><a href="">评论</a></li>
                    <li><a href="">@我</a></li>
                </ul>
            </li>
            <li>
                <a href="">微博</a>
                <ul>
                    <li><a href="">私信</a></li>
                    <li><a href="">评论</a></li>
                    <li><a href="">@我</a></li>
                </ul>
            </li>
            <li>
                <a href="">微博</a>
                <ul>
                    <li><a href="">私信</a></li>
                    <li><a href="">评论</a></li>
                    <li><a href="">@我</a></li>
                </ul>
            </li>
        </ul>


        <script type="text/javascript">
            /*父元素
            console.log($("li").parent())
             子元素 ---亲儿子 
             $("p").children("span").css("color","red")
             find()
             $("ul").find("p").css("color","white")
            
             $("li").css("background","#0044ff")
            $(function(){
                $("ul li:even").css('color','blue')
            }) 
             $("ul li:frist").css("color","red")
            $("li")[0].style.background = "#000"*/
            
            $("ul:first li").mouseover(function(){
                $(this).children('ul').show()
            })
            $("ul:first li").mouseout(function(){
                $(this).children("ul").hide()
            })
        </script>
    </body>
</html>

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排他思想

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
        
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        <button type="button">
            按钮
        </button>
        
        <script type="text/javascript">
    $(function(){
            //1.隐式迭代  给所有的按钮都绑定了点击事件
                $("button").click(function(){
                    //2.当前元素变化背景颜色
                    $(this).css("background","#0044aa");
                    //3.其余的兄弟去掉背景颜色
                    $(this).siblings("button").css("background","")
                })
            })
        </script>
    </body>
</html>

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

$(this).index()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <style type="text/css">
        *{
            list-style: none;
        }
        .wrapper{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        .content{
            position: absolute;
            right: 0;
            top: 0;
        }
        .wrapper ul li{
            margin: 15px;
        }
        .wrapper ul li a{
            color: brown;
            background: antiquewhite;
            overflow: hidden;
        }
        .content div{
            display: none;
        }
        .content div a img{
            width: 200px;
            height: 200px;
        }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $(".wrapper ul li").hover(function(){
                    $(this).css("background","yellow");
                    $(this).siblings("li").css("background","")
                    var index = $(this).index()
                    console.log(index)
                    $(".content div")[index].style.display = "block"
                    $(".content div").eq(index).siblings("div").css("display","none")
                })
                
            })
        </script>
    </head>
    <body>
        <div class="wrapper">
            <ul>
                <li><a href="#">111</a></li>
                <li><a href="#">222</a></li>
                <li><a href="#">333</a></li>
                <li><a href="#">444</a></li>
                <li><a href="#">555</a></li>
                <li><a href="#">666</a></li>
            </ul>
            <div class="content">
                <div><a href="#"><img src="img/20150109015243_YxaiS.thumb.700_0.jpg" alt=""></a></div>
                <div><a href="#"><img src="img/20150213161500_85Wyi.jpg" alt=""></a></div>
                <div><a href="#"><img src="img/20150810161918_zSZV8.thumb.700_0.jpg" alt=""></a></div>
                <div><a href="#"><img src="img/20150828131502_rhYT3.jpg" alt=""></a></div>
                <div><a href="#"><img src="img/20161017134933_xrKzG.thumb.700_0.gif" alt=""></a></div>
                <div><a href="#"><img src="img/20180523070105_zvcpq.jpg" alt=""></a></div>
            </div>
        </div>
        <script type="text/javascript">

        </script>
    </body>
</html>

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")

<div class = "currrent"></div>
<script>
$("div").click(function(){
    $(this).addClass("current")
})
</script>

current是通过点击加上去的

2.删除类

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

3 切换类

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

3.2.3 案例：tab栏切换案例

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 161,513评论 4赞 369
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 68,312评论 1赞 305
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 111,124评论 0赞 254
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,529评论 0赞 217
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,937评论 3赞 295
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,913评论 1赞 224
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 32,084评论 2赞 317
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,816评论 0赞 205
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,593评论 1赞 249
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,788评论 2赞 253
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,267评论 1赞 265
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,601评论 3赞 261
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,265评论 3赞 241
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,158评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,953评论 0赞 201
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 36,066评论 2赞 285
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,852评论 2赞 277