jQuery 学习笔记黑马

最新推荐文章于 2022-11-06 14:59:42 发布

HGKIVD

最新推荐文章于 2022-11-06 14:59:42 发布

阅读量209

点赞数

分类专栏：学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/HGKIVD/article/details/127620629

版权

jQuery

概述

JavaScript库

jQuery、Prototype、YUI、Dojo、移动端的zepto，这些库都是对原生JavaScript的封装，内部是用JavaScript实现的。

优点：轻量级、跨浏览器兼容、免费开源、支持插件扩展开发。

1.基本使用

<script>
        //不能对div进行隐藏 页面还没有加载之前就执行js 找不到div标签
        //$('div').hide();

        //1.等着页面DOM加载完毕再去执行js代码
        // $(document).ready(function () {
   
        //     $('div').hide();
        // })

    	//入口函数
        $(function () {
   
            $('div').hide()
        })
    </script>
    <div></div>

2.jQuery的顶级对象$

$是 j Q u ery 的别称，在代码中可以使用 j Q u ery 代替$ ，为了方便，通常使用$。

$是 j Q u ery 的顶级对象，相当于原生 J a v a S cr i pt 中的 w in d o w 。把元素利用$ 包装成jQuery对象，可以调用jQuery的方法。

3.jQuery和DOM对象

<script>
    // DOM对象 原生js
    let myDiv = document.querySelector('div')
    console.log(myDiv)

    //jQuery对象 用jQuery方式获取的对象是jQuery对象 本质：通过$把DOM元素进行了包装
    console.log($('div'))   //伪数组存储
</script>

4.DOM对象和jQuery相互转换

原生js大于jQuery对象

<video src="./972301313_1_0_new.mp4"></video>
<script>
    //DOM对象转换为jQuery对象
    // const myvideo = document.querySelector('video')
    // $(myvideo)

    //jQuery对象转换为DOM对象 只有一个视频 索引号为0
    // $('video')[0].play()
    $('video').get(0).play()
</script>

常用API

1.选择器

名称	用法	描述
ID选择器	$(‘#id’)
全选择器	$(‘*’)
类选择器	$(‘.class’)
标签选择器	$(‘div’)
并集选择器	$(‘div,p,li’)
交集选择器	$(‘li.current’)

<div>我是div</div>
<div class="nav">我是nav div</div>
<ol>
    <li>我是ol</li>
    <li>我是ol</li>
    <li>我是ol</li>
    <li>我是ol</li>
    <li>我是ol</li>
</ol>
<ul>
    <li>我是ul</li>
    <li>我是ul</li>
    <li>我是ul</li>
    <li>我是ul</li>
    <li>我是ul</li>
</ul>
<script>
    $(function () {
   
        $('.nav')
        console.log($('ul li'))
    })
</script>

2.隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

给匹配到的所有元素进行循环遍历，执行相应的方法，而不用再进行循环

<div>1111</div>
<div>1111</div>
<div>1111</div>
<div>1111</div>
<ul>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
    <li>2222</li>
</ul>
<script>
    //获取四个div元素
    // $('div')

    //给四个div设置背景颜色为粉色
    $('div').css('background', 'pink')
	$('ul li').css('color', 'blue')
</script>

3.筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个元素
:last	$(‘li:last’)	获取最后一个元素
:eq(index)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号为2的元素，索引号从0开始
:odd	$(‘li:odd’)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的li元素中，选择索引号为偶数的元素

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
    <li>888</li>
</ul>
<ol>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
    <li>我是小li</li>
</ol>
<script>
    $(function () {
   
        $('ul li:first').css('color', 'red')
        $('ul li:eq(2)').css('color', 'pink')
        //索引号为奇数
        $('ol li:odd').css('color', 'skyblue')
        //索引号为偶数
        $('ol li:even').css('color', 'pink')
    })
</script>

4.筛选方法

语法	用法	说明
parent()	$(‘li’).parent()	查找父级
children(selector)	$(‘ul’).children(‘li’)	查找最近一级
find(selector)	$(‘ul’).find(‘li’)	后代选择器
siblings(selector)	$(‘.first’).siblings(‘li’)	查找兄弟节点，不包括自身
nextAll()	$(‘.first’).nextAll()	查找当前元素之后所有的同辈元素
prevAll()	$(‘last’).prevAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(‘div’).hasClass()	检查当前元素是否包含某个类，如果有，返回true
eq(index)	$(‘li’).eq(2)	index从0开始，选择第几个

重点：parent()、children()、find()、siblings()、eq()

5.下拉菜单案例

<ul class="nav">
    <li>
        <a href="#" class="title">微博</a>
        <ul class="content" hidden>
            <li>
                <a href="#">私信</a>
            </li>
            <li>
                <a href="#">评论</a>
            </li>
            <li>
                <a href="#">@我</a>
            </li>
        </ul>
    </li>
</ul>
<script>
    $(function () {
   
        $('.nav>li').mouseover(function () {
   
            //当前元素
            $(this).children('ul').show()
        })
        $('.nav>li').mouseout(function () {
   
            $(this).children('ul').hide()
        })
    })
</script>

注：使用原生JS要循环遍历ul中的每一个li，而jQuery则有隐式迭代，给每一个儿子元素绑定了事件

6.排他思想

<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>

<script>
    $(function () {
   
        //隐式迭代 给所有的按钮绑定点击事件
        $("button").click(function () {
   
            //当前元素变化背景颜色
            $(this).css('background', 'pink')
            //其余兄弟去掉背景颜色 隐式迭代
            $(this).siblings('button').css('background', '')
        })
    })
</script>

7.淘宝服饰案例

核心原理：鼠标经过左侧盒子某个li，就让内容区盒子相对应的图片显示，其余图片隐藏

需要得到li的索引号，可以显示对应的图片

jQuery得到当前元素索引号$(this).index()

通过eq(index)方法选择

显示元素show() 隐藏hide()

<style>
    * {
   
        margin: 0;
        padding: 0;
    }

    a {
   
        text-decoration: none;
        color: black;
        font-size: 14px;
    }

    .wrapper {
   
        margin-left: 300px;
        margin-top: 200px;
    }

    .wrapper .left {
   
        float: left;
    }

    .wrapper .left li {
   
        list-style: none;
        width: 50px;
        height: 25px;
        text-align: center;
        border: 2px solid #e9d1d0;
        border-bottom: 0;
        line-height: 30px;
        /* 背景渐变 */
        background-image: linear-gradient(to top, #fcf1ed, #fbfdfb);
    }

    .wrapper .left li:last-child {
   
        border-bottom: 2px solid #e9d1d0;
    }

    .wrapper .content {
   
        float: left;
        overflow: hidden;
    }

    .wrapper .content div {
   
        display: none;
    }

    .wrapper .content div:first-child {
   
        display: block;
    }

    .wrapper .content img {
   
        width: 250px;
        border-left: 0px;
    }
</style>

<div class="wrapper">
    <ul class="left">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
    </ul>
    <div class="content">
        <div>
            <a href="#"><img src="./images/1.jpg" alt=""></a>
        </div>
        <div>
            <a href="#"><img src="./images/2.jpg" alt=""></a>
        </div>
        <div>
            <a href="#"><img src="./images/3.jpg" alt=""></a>
        </div>
        <div>
            <a href="#"><img src="./images/4.jpg" alt=""></a>
        </div>
    </div>
</div>

<script>
    $(function () {
   
        $('.left li').mouseover(function () {
   
            //得到当前li的索引号
            var index = $(this).index()
            //让右侧盒子显示相应的图片
            $('.content div').eq(index).show()
            $('.content div').eq(index).siblings().hide()
        })
    })
</script>

8.链式编程

使代码更简介，将两句合并到一句

$(this).css('background', 'pink').siblings().css('background', '')

9.jQuery修改css样式

(1) 只写属性名，则返回属性值

$(this).css('color')

<script>
    {
   $(function () {
   
        console.log($('div').css('width'))
        // $('div').css('width', '300px')
        $('div').css({
   
            width: 400,
            height: 400,
            backgroundColor: 'skyblue'
        })
    })
</script>}

注：使用对象形式进行多个样式的修改，数字可以不用带引号，字符必须带引号，background-color需使用驼峰命名法。

(2) 设置类样式操作

<script>
        $(function () {
   
            console.log($('div').css('width'))
            // $('div').css('width', '300px')
            // $('div').css({
   
            //     width: 400,
            //     height: 400,
            //     backgroundColor: 'skyblue'
            // })

            $('div').click(function () {
   
                // $(this).addClass('current')
                // $(this).removeClass('current')

                //切换类
                $(this).toggleClass('current')
            })
        })
</script>

注：方法内，类名前不用加.

(3) tab栏切换案例

<style>
    * {
   
        margin: 0;
        padding: 0;
        box-sizing: border-box;

最低0.47元/天解锁文章