美文网首页
2019-08-14 jQuery--开始

2019-08-14 jQuery--开始

作者: 棘菀 | 来源:发表于2019-08-14 17:32 被阅读0次

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栏切换案例

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

相关文章

  • 2019-08-14 jQuery--开始

    Markdown语法参考 jQuery JavaScript 库 1.即library 是一个封装好的特定的集合...

  • 789艺术广场和老井西餐厅

    2019-08-14 798艺术广场 2019-08-14 老井西餐厅

  • jQuery--选择器

    jQuery--选择器 一、JavaScript中选择元素 • document.getElementById()...

  • jQuery--基础

    一、jQuery简介 jQuery 就是 JavaScript 的一个库，把我们常用的一些功能进行了封装，方便地处...

  • jQuery--代理

  • vue

    1，jQuery与vue区别 jQuery--指令式编程 vue--声明式编程 vue更加高效，流行 2，let与...

  • jQuery--事件处理

    一、事件模型 1.浏览器事件模型 ①DOM0级事件模型：只支持一个DOM事件处理函数• • input.onc...

  • jQuery--事件处理

    jQuery--事件处理 一、事件模型 1.浏览器事件模型①DOM0级事件模型：只支持一个DOM事件处理函数• ...

  • iOS审核历程

    2019-08-14最近上架APP，审核通过，从开始上架到审核通过历程10天的时间，中间被拒了5次。 1.测试账号...

  • Lan的ScalersTalk第四轮新概念朗读持续力训练Day

    练习材料： [Day 1783 2019-08-14] Lesson 32-3 Galileo reborn 伽利...

网友评论

      本文标题：2019-08-14 jQuery--开始

      本文链接：https://www.haomeiwen.com/subject/arswjctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|2019-08-14 jQuery--开始|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！