Web精选08集（JQuery基础认知与使用）

一. 介绍

jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。【对所有浏览器都兼容实现】

二. 使用

1）引入

先引入jquery文件，才能使用jquery语法

1. CDN 有网（备用）
2. 本地文件（常用）

2）工厂函数 - $()

"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。

例如 :

 //$()获取元素节点,需传入字符串的选择器
 $("h1")
 $("#d1")
 $(".c1")
 $("body,h1,p")
 //选择器的特点，与样式选择器一致

3）原生JavaScript对象与jQuery对象

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

1. 原生JavaScript转换jQuery对象
   $(原生对象)，返回 jQuery 对象
2. jQuery对象转换原生JavaScript对象
   ① 方法一 : 根据下标取元素,取出即为原生对象
   var div = $(“div”)[0];
   ② 方法二 : 使用jQuery的get(index)取原生对象
   var div2 = $(“div”).get(0);

Demo

<div id="div1" class="d1">
        hello world
    </div>
    <script src="jquery.min.js"></script>
    <script>
        console.log($('#div1'));//jQuery对象
        var div = document.getElementById('#div1');
        console.log(div);//DOM对象

        //jQuery对象中索引为0的位置保存的是对应的DOM对象
        console.log($('#div1')[0]);//jQuery -> DOM
        console.log($(div));//DOM -> jQuery

        //区别
        //DOM 对象 innerHTML innerText setAttribute()..
        //jQuery对象没有DOM的方法和属性

        // 找元素
        // 改内容
        // 改样式
        // 改属性
        // 动画效果
        // 页面元素的事件绑定
    </script>

4）jQuery获取元素

jQuery通过选择器获取元素，$(“选择器”)

选择器分类 :

1. 基础选择器

标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")

2. 层级选择器

后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素

3. 过滤选择器，需要结合其他选择器使用。

:first
  匹配第一个元素 例:$("p:first")
:last
  匹配最后一个元素 例:$("p:last")
:odd
  匹配奇数下标对应的元素
:even
  匹配偶数下标对应的元素
:eq(index)
  匹配指定下标的元素
:lt(index)
  匹配下标小于index的元素
:gt(index)
  匹配下标大于index的元素
:not(选择器)
  否定筛选,除()中选择器外,其他元素

Demo【选择器添加样式】

   <div id="silder">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <div>
                <span>d1</span>
                <span>d2</span>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        //even偶数下标添加颜色
        $('#silder>span:even').css('color','green');
        // $('#silder>span:first').css('font-size','30px').css('color','blue');
        // $('#silder>span:last').css('font-size','40px');
        // 查找索引值为2的span元素
        $('#silder>span:eq(2)').css('color','pink');
        //比2小的字体为红色
        $('#silder>span:lt(2)').css('color','red');
        //比2大的字体加粗
        $('#silder>span:gt(2)').css('font-weight','bold');
        //查找silder下除了span的其他元素，设置字体蓝色加粗
        $('#silder:not(#silder>span)').css('color','blue').css('font-weight','bold');

        console.log($('#silder>span'))//jQuery对象
        // 找到active后面的第一个span 添加字体颜色
        // $('.active+span').css ('color','red');
        // 找active后面的兄弟元素div添加字体颜色
        // $('.active~div').css('color','red');
    </script>

5）操作元素内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性

6）操作标签属性

① . attr(“attrName”,“value”)

设置或读取标签属性

② . prop(“attrName”,“value”)

设置或读取标签属性

注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

③ . removeAttr(“attrName”)

移除指定属性

Demo【操作属性】

 <div>
            <input id="xieyi" type="checkbox">已同意阅读协议
            <a href="#">《协议》</a>
    </div>
    <button id="btn">提交</button>
    <script src="jquery.min.js"></script>
    <script>
        // 当按钮被点击时 检查复选框是否被用户选中(checked)
        // 如果选中 弹框 提交成功
        // 否则 弹框 请阅读协议
        $("#btn").on('click',function(){
            // console.log($('input').attr('checked'))//undefined
            // console.log($('input').prop('checked'))//true/false
            $('input').prop('checked')?alert('提交成功'):alert('请阅读协议');
        })
        // $('#xieyi').prop("#xieyi","checked")
    </script>

7）操作标签样式

1. 为元素添加id/class属性,对应选择器样式
2. 针对类选择器,提供操作class属性值的方法

addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

3. 操作行内样式

css("属性名","属性值")  //设置行内样式
css(JavaScriptON对象)			 //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 */

Demo【操作标签样式】

<style>
        .item{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="item"></div>
    <script src="jquery.min.js"></script>
    <script>
        //案例1
        $('.item').on('click',function(){
            // $(this).addClass('active');//添加类	样式比较多的建议用class添加
            // $(this).removeClass('item');//删除类
            $(this).toggleClass('active');//切换类名
        })
        //案例2	
          // $('.item').on('click',function(){
        //     // $(this).css('background-color','red')//修改元素的style
        //     $(this).css({
        //         'background-color':'red',
        //         'width':'300px',
        //         'height':'300px'
        //     })
        // })
    </script>

8）元素的创建,添加,删除

1. 创建：使用$(“标签语法”)，返回创建好的元素

var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式

2. 作为子元素添加

$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

3. 作为兄弟元素添加

$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

4. 移除元素

$obj.remove();	//移除$obj

Demo【创建页面标签】

<div>你好</div>
    <script src="jquery.min.js"></script>
    <script>
        //元素的创建
        // 方法1：
        // var html = '<h1>你好</h1>';
        // $('body').html(html)

        // 方法2：
        // var  h1 = $('<h1 id="title" >hello world</h1>');
        // console.log(h1);
        // $('body').append(h1);

        // 方法3：
        //直接添加 需要传入字符串形式的页面内容
        // $('body').append('<h1 id="title" >hello world</h1>');
       
        //区别 
        // appen()追加元素 不会修改原有内容
        // html()重写内容

        //在前面添加兄弟元素
        $('div').before('<h1 id="title" >666</h1>');
        //创建后删除div
        $('div').remove()
    </script>

9）动画效果

1. 显示和隐藏

    show(speed,callback)/hide(speed,callback)
   

   • speed 可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
   • callback 可选。show 函数执行完之后，要执行的函数
2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（只针对块元素）

    slideDown(speed,callback)/slideUp(speed,callback)
   

3. 通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

    fadeOut(speed,callback)/fadeIn(speed,callback)
   

4. 动画函数，可以实现自定义动画 animate 函数

   animate(styles,speed,callback)
   

• styles 必需。规定产生动画效果的 CSS 样式和值
• speed 可选。规定动画的速度。默认是 “normal”
• callback 可选。show 函数执行完之后，要执行的函数

Demo【隐藏、上推、淡隐】

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画效果</title>
</head>
<body>
    <div id="img">
        <img src="gm1-6.jpg" alt="">
    </div>
    <div>
        <button class="btn1">隐藏</button>
        <button class="btn2">上推</button>
        <button class="btn3">淡隐</button>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        // 休息11:10~11:25
        // 练习上推下拉(对块元素生效)  淡隐淡现效果
        $('.btn3').on('click',function(){
            if($(this).html() == '淡隐'){
                $('#img').fadeOut(3000,function(){
                    // hide执行完成后调用
                    $('.btn3').html('淡现');
                });
            }else{
                $('#img').fadeIn(3000,function(){
                    $('.btn3').html('淡隐');
                });
            }
        })

        $('.btn2').on('click',function(){
            if($(this).html() == '上推'){
                $('#img').slideUp(3000,function(){
                    // hide执行完成后调用
                    $('.btn2').html('下拉');
                });
            }else{
                $('#img').slideDown(3000,function(){
                    $('.btn2').html('上推');
                });
            }
        })

        // 点击隐藏按钮 将图片隐藏  xxx.hide()
        $('.btn1').on('click',function(){
            if($(this).html() == '隐藏'){
                $('img').hide(3000,function(){
                    // hide执行完成后调用
                    $('.btn1').html('显示');
                });
            }else{
                $('img').show(3000,function(){
                    $('.btn1').html('隐藏');
                });
            }
        })
        // 图片隐藏之后 将按钮上的文字改为显示
        // 点击显示按钮 将图片显示  然后将文字变为隐藏
    </script>

Demo【animate小球来回移动】

 <head>
<style>
    #ball{
        width: 100px;
        height: 100px;
        background-color: orange;
        border-radius: 50%;
        position: absolute;
    }
    </style>
</head>
<body>
     <div id="ball">
    </div>
    <script src="jquery.min.js"></script>
    <script>
        // //小球来回移动
        //     $('#ball').animate(
        //         {'margin-left':'300px'},//样式
        //         2000,//时间
        //         function(){
        //             $('#ball').animate(
        //                     {'margin-left':'0'},//样式
        //                     2000,//时间
        //             )
        //         }
        //     )
        
        //小球来回移动后隐藏
            // $('#ball').animate(
            //     {'margin-left':'300px'},//样式
            //     2000,//时间
            // ).animate(
            //     {'margin-left':'0'},
            //     2000,
            //     function(){
            //         //animate执行完成后调用
            //         $(this).fadeOut(2000)
            //     }
            // )

            //小球围边框绕一圈
            $('#ball').animate(
                {'right':'0'},2000
                ).animate(
                    {'bottom':'0'},2000
                ).animate(
                    {'left':'0'},2000
                ).animate(
                    {'top':'0'},2000,function(){
                        $('#ball').slideUp(2000)
                    }
                )
    </script>

10）数据与对象遍历

1. $(selector).each() 方法规定为每个匹配元素规定运行的函数

   $(selector).each(function(index,element){})
   

   必需。为每个匹配元素规定运行的函数。
   ①index- 选择器的 index 位置
   ② element - 当前的元素
2. $.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理

   $.each(Object, function(index, data){});
   

   必需。为每个匹配元素规定运行的函数。
   • index- 选择器的 index 位置
   • data- 当前的数据

11）jQuery事件处理

1. 文档加载完毕
   原生JavaScript 方法：window.onload
   jQuery:

//语法一 
$(document).ready(function (){
  //文档加载完毕后执行
})
//语法二 
$().ready(function (){
  //文档加载完毕后执行
})
//语法三 
$(function(){
  //文档加载完毕后执行
})

区别：

原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

2. 事件绑定方式
   事件名称省略 on 前缀

  //on("事件名称"，function)
  $("div").on("click",function(){});//新版本使用的多些
  //bind("事件名称",function)
  $("div").bind("click",function(){});//1.6-1.8间的版本
  //事件名作为方法名
  $("div").click(function(){});  

3. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。

Demo【on事件绑定】

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
</head>
<body>
    <div id="parent">
        <span>hhhhhhh</span>
    </div>
    <button>添加p元素</button>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                $('#parent').append('<p>我是新建的p元素</p>');
            })

            //on委托事件
            //$(selector).on('事件名','执行事件的元素（后代）',function(){})
            //selector祖先元素 监听事件的执行，如果是指定执行事件的元素才帮
            $('parent').on('click','p',function(){
                console.log($(this).html())
            })
            // $('p').click(function(){
            //     console.log($(this).html())
            // })
        })
    </script>

Demo【on绑定多个事件toggleClass属性增删】

<style>
div{
    width: 200px;
    height: 200px;
    background-color: blue;
}
.active{
    background-color: red;
}
</style>
<script src="jquery.min.js"></script>
<body>
    <div></div>
    <script>
        // 鼠标移入div变红色，鼠标移除div变蓝色
        // $(function(){
        //     $('div').mouseover(function(){
        //         $(this).addClass('active');
        //     })
        //     $('div').mouseout(function(){
        //         $(this).removeClass('active');
        //     })
        // })

        // 升级版
        //一个on函数绑定多个事件
        //toggleClass有就删除没有就添加
        $(function(){
            $('div').on('mouseover mouseout',function(){
                $(this).toggleClass('active');
            })
        })
    </script>

Demo【操作元素内容on input】

  <title>操作元素内容</title>
</head>
<body>
    <input type="text" id="text" placeholder="输入内容在下方显示">
    <h1></h1>
    <script src="jquery.min.js"></script>
    <script>
        //当用户在input写内容时，将内容在下方的h1中显示
        //oninput 当在文本框输入内容时触发
        //xxx.oninput = function(){}
        $('#text').on('input',function(){
            //文本框的值		同步输出框内值
            //this是DOM对象 如果在jQuery中需要$(this)
            $('h1').html($(this).val());
            // var value = $('#text').val();
            // $('h1').html(value);
        })
    </script>

Demo【操作元素内change input】

 <input type="text" id="text" placeholder="输入内容在下方显示">
    <h1></h1>
    <script src="jquery.min.js"></script>
    <script>
        //当用户在input写内容时，将内容在下方的h1中显示
        //onchange当文本框的值发生改变触发 val等价于value html等价于innerHTML
        //当输入框完成输入后，鼠标点击其他地方就会取出输入值
        $('#text').on('change',function(){
            $('h1').html($(this).val());
        })
        </script>