前端基础之jQuery

JavaScript和jQuery的区别

1. JavaScript是一门编程语言，我们用它来编写客户端浏览器脚本
2. jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
3. Jquery能做的javascript都能做到，而javascript能做的事情，Jquery不一定能做到。

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用方法和属性。

DOM文档加载的步骤

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。
5. 加载图片等外部文件。
6. 页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行。

简化写法不同

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

jquery文件的引入

使用jquery第一步，先引入jquery，然后再写相应的jquery代码（引入jquery跟引入js文件一样，jquery文件可以在官网下载。）

注意：

DOM元素加载完成之后就会调用

//程序执行需要有入口
$(document).ready(function(){
   alert(1) 
})

等价于

$(function(){
   $('#btn').click(function(){
         $('div').show().html('我的内容')
   })
})

jquery的基础选择器

选择器的用法跟css的选择器用法类似，只是代码书写的不同。

<ul>
    <li id="brother" class="item">路飞学诚1</li>
    <li >路飞学诚2</li>
    <li class="item">路飞学诚3</li>
    <li>路飞学诚4</li>
    <li class="item">路飞学诚5</li>
    <li>路飞学诚6</li>
    <li class="item">路飞学诚7</li>
        <a href="#">百度一下</a>
    </ul>
    <div id="duanzi">
        <p>天王盖地虎</p>
        <p><h1>小鸡炖蘑菇</h1></p>
        <p>宝塔镇河妖</p>
        <p>蘑菇放辣椒</p>
    </div>

// 基本选择器
// 1.id选择器
$('#brother').css('color', 'black');

// 2.标签选择器
$('a').css('color', 'yellow');

// 3.类选择器
$('.item').css('background', 'red');

// 4.通配符选择器
// console.log($('*').html())
console.log($('a').val())

层级选择器

// 后代选择器
console.log($('div p'));
$('div p').css('color', 'red');

// 子代选择器
$('div >p').css('background', 'green')

// 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素
$('#brother+ li').css('background', 'yellow');

// 兄弟选择器
// 匹配所有#brother之后的所有兄弟姐妹元素
$('#brother~li').css('background', 'purple');

// :first  获取第一个元素
$('li:first').text('第一')

// :last  获取最后一个元素
$('li:last').html('最后')

// 一个给定索引值的元素
console.log($('p:eg(3)').text())

基本过滤选择器

        <ul>
            <li>哈哈哈</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>

        </ul>

    //:first  获取第一个元素
        $('li:first').text('真的吗？')
        //:last 获取最后一个元素
        $('li:last').html('我是最后一个元素？')

        //:odd 匹配所有索引值为奇数的元素，从0开始计数
        $('li:odd').css('color','green');

        //:even 匹配所有索引值为偶数的元素，从0开始计数
        $('li:even').css('color','red')

        //:eq(index) 获取给定索引值的元素 从0开始计数
        $('li:eq(1)').css('font-size','30px')

        //:gt(index)匹配所有大于给定索引值的元素
        $('li:gt(1)').css('font-size','40px')

        //:lt(index) 匹配所有小于给定索引值的元素
        $('li:lt(1)').css('font-size','40px')

        //一个给定索引值的元素
        console.log($('p:eq(3)').text())

属性选择器

<div id="box">
            <h2 class="title">属性元素器</h2>
            <p class="p1">我是一个段落</p>
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked"></input>
                <input name="username1111" type='text' value="1"></input>
                <input name="username2222" type='text' value="1"></input>
                <input name="username3333" type='text' value="1"></input>
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>


            </form>
        </div>

    //属性选择器

        //标签名[属性名] 查找所有含有id属性的该标签名的元素
        $("li[id]").css('color','red')

        //[attr=value] 匹配给定的属性是某个特定值的元素
        $('li[class=what]').css('font-size','30px')

        //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
        $('li[class!=what]').css('color','darkgreen')

        //匹配给定的属性是以某些值开始的元素
        $('input[name^=username]').css('background','red')

        //匹配给定的属性是以某些值结尾的元素
        $('input[name$=222]').css('background','yellow')
        //匹配给定的属性是以包含某些值的元素
        $("button[class*='btn']").css('background','#0000FF')

筛选选择器

        <div id="box">
            <p class="p1">
                <span>我是第一个span标签</span>
                <span>我是第二个span标签</span>
                <span>我是第三个span标签</span>
            </p>
            <button>按钮</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

// 获取第n个元素  数字从0开始
    $('span').eq(0).css('font-size', '30px');

    //first()获取第一个元素
    $('span').first().css('background', 'red');

    //last()获取最后一个元素

    //.parent() 选择父亲元素
    $('span').parent('.p1').css({'300px', height:'300px', background: 'yellow'});

    //.siblings() 选择所有的兄弟元素
    $('.list').siblings('li').css('color', 'red');

    //.find()
    // 查找所有的后代元素
    $('div').find('button').css('background', 'red');
    

jquery对象和DOM对象转换

DOM对象转换成jquery对象

var box = document.getElementById('box');
console.log($(box));

jquery对象转换成DOM对象

第一种方式：

$('button')[0];

第二种方式：

$('button').get(0);

jquery的效果

show

概念：显示隐藏的匹配元素   语法：show(speed, callback)参数：

1.speed：三种预定速度之一的字符串（'slow', 'normal', 'fast'）或表示动画时长的毫秒值（如：1000毫秒==1秒）

2.callback：在动画完成时执行的函数，每个元素执行一次

hide

hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。

可以通过show()和hide()方法，来控制元素的显示隐藏

toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

slideDown

概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后出发一个回调函数用法和参数跟上面类似。

slideUp

概念：通过高度变化（向上减少）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

slideToggle

概念：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

fadeIn

概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeOut

概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle

概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

实现淡入淡出的效果就是使用此方法

animate

概念：用于创建自定义动画的函数

语法：animate(params,[speed], [fn])

参数：

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

stop

概念：停止所有在指定元素上正在运行的动画

语法：stop([clearQueue],[jumpToEnd])

参数：

clearQueue：如果设置成true，则情况队列。可以立即结束动画。

gotoEnd：让当前正在执行的动画立刻完成，并且重设show和hide的原始样式，调用回调函数等

delay

概念：用来做延迟的操作

语法：delay(1000)， 一秒之后做后面的操作

jquery的属性操作

jquery对象有他自己的属性和方法，我们先研究一下jquery的属性操作

jquery的属性操作模块分为四个部分：html属性操作、dom属性操作、类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr

概念：设置属性值或者返回被选元素的属性值

// 获取值：attr()设置一个属性值的时候  知识获取值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)

//设置值
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:"hahaha", class:"happy"})

removeAttr

从每一个匹配的元素中删除一个属性

prop

prop()获取在匹配的元素集中的第一个元素的属性值。它是对当前匹配到的dom对象设置值。

removeProp

用来删除由.prop()方法设置的属性集

addClass（添加多个类名）

为每个匹配的元素添加指定的类名。

$('div').addClass("box")：添加一个类名

$('div').addClass("box box2")：添加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的。

$('div').removeClass('box')移除指定的类

$('div').removeClass移除全部的类

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
        })

toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

html

获取值：

html() 是获取选中标签元素中所有的内容

设置值：设置该元素的所有内容 会替换掉 标签中原来的内容

$('ul').html('<a href="#">百度一下</a>')
    //可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
    return '哈哈哈'
})

text

获取值：

text() 获取匹配元素包含的文本内容

设置值：
设置该所有的文本内容
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

val

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')

 

操作表单域中的value值

HTML

    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay

            <input type="checkbox" value="a" checked=""/>吃饭
            <input type="checkbox" value="b" checked=""/>睡觉
            <input type="checkbox" value="c" checked=""/>打豆豆

            <select name="timespan" id="timespan" class="Wdate"   >  
                <option value="1">8:00-8:30</option>  
                <option value="2">8:30-9:00</option>  
                <option value="3">9:00-9:30</option>  
            </select>  
            <input type="text" name="" id="" value="111" />
    </form>

JS

 $(function(){
                //1.获取单选框被选中的value值
                console.log($('input[type=radio]:checked').val())

                //2.复选框被选中的value获取到第一个被选中的值
                console.log($('input[type=checkbox]:checked').val())

                //3.下拉列表被选中的值
                var obj = $("#timespan option:selected");
                var  artime_val  = obj.val();  
                console.log(artime_val)
                var  artime_text  = obj.text();  
                console.log("val:"+artime_val+" text"+ artime_text );//val:3 text 9:00-9:30


                //设置value  设置选中项
                $('input[type=radio]').val(['112'])
                $('input[type=checkbox]').val(['a','b'])


                //设置下拉列表框的选中值，必须使用select
                $('select').val(['3','2'])


                //文本框
                console.log($("input[type=text]").val())//获取文本框中的值
                //设置值
                $('input[type=text]').val('试试就试试')




        })

jQuery的文档操作

1、插入操作

一、父元素.append(子元素)追加某元素 父元素中添加新的元素

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
//jquery中的dom操作
//1.append(content)追加  往父元素中添加新的元素
//content:string | element | jquery元素
$('ul').append('<li>1233</li>')
$('ul').append(oli)
//如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
$('ul').append($('#app'))

二、子元素.appendTo(父元素)追加到某元素  子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')

三、prepend()前置添加，添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

四、appendTo后置添加，第一个元素

 $('<a href="#">路飞学诚</a>').prependTo('ul')

五、父.after(子)在匹配的元素之后插入内容 与子.insertAfter(父)

$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')

六、父.before(子) 在匹配的元素之前插入内容 与 子.insertBefor(父)

$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

2、复制操作

clone()克隆匹配的DOM元素并且选中这些克隆的副本

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

3、替换操作

一、replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

4、删除操作

一、remove()删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

二、detach()删除节点后，事件会保留

 var $btn = $('button').detach()
 //此时按钮能追加到ul中
 $('ul').append($btn)

三、empty()：清空元素中的所有后代节点

//清空掉ul中的子元素，保留ul
$('ul').empty()

Jquery的CSS

position

获取匹配元素相对父元素的偏移位置

offset

获取匹配元素在当前视图的相对偏移，返回的对象包含两个整形属性：top和left。

$("p").offset()
$('div').offset().top
$("p").offset().left

scrollTop

获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值

scrollLeft

获取匹配元素相对滚动条左侧的偏移 文档被卷起的像素值

 //获取匹配元素相对滚动条顶部的偏移  文档被卷起的像素值
$(document).scrollTop()
$(document).scrollLeft()

//监听文档滚动的jquery方法
$(document).scroll(function(){
    console.log($(document).scrollTop())
    console.log($(document).scrollLeft())

 })

innerHeight

获取第一个匹配元素内部区域高度（包括补白，不包括边框）

$('#box').innerHeight()

innerWidth

获取第一个元素内部区域宽度（包括补白，不包括边框）

$('#box').innerWeight()

outerHeight

获取第一个匹配元素外部高度（默认包括补白和边框）

$('#box').outerHeidth()

outerWeight

获取第一个匹配元素外部宽度（默认包括补白和边框）

$('#box').outerWeidth()

weight

取得匹配元素当前计算的宽度值

//获取值
$('p').width()

//设置值
$('p').width(200)

height

取得匹配元素当前计算的高度值

//获取值
$('p').height()
//设置值
$('p').Height(200）

 

Jquery的筛选方法

 Jquery的事件

事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动时间onscroll等，可以向文档或者文档中的元素添加时间监听器来预定事件。想要知道这些时间是在什么时候进行调用的，就需要了解一下"事件流"的概念。

什么是事件流

事件流描述的是从页面中接收事件的顺序

DOM事件流包括三个阶段

1. 事件捕获阶段；
2. 处于目标阶段；
3. 事件冒泡阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn处于事件捕获阶段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn处于事件冒泡阶段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document处于事件捕获阶段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document处于事件冒泡阶段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html处于事件捕获阶段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html处于事件冒泡阶段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body处于事件捕获阶段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body处于事件冒泡阶段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按钮</a>
</body>
</html>

当我们点击这个btn的时候，看看页面都输出了什么：

 在解释输出结果为什么是这样之前，还有几个知识点需要了解一下即可：

1、addEventListener

addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

2、document、documentElement和document.body三者之间的关系：

document代表的是整个html页面；

document.documentElement代表的是<html>标签；

document.body代表的是<body>标签；

接着我们就来聊聊上面的例子中输出的结果为什么是这样：

在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。这里可以画个图示意一下:

首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。

接着在事件冒泡过程中，事件开始由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）

需要注意的点：由于老版本的浏览器不支持事件捕获，因此在实际开发中需要使用事件冒泡，在由特殊需要时再使用事件捕获。

补充：

1、IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以后，实现了“DOM2级事件”，也就是说IE9+以后也可以在捕获阶段对元素进行相应的操作。

2、在DOM事件流中，实际的目标在“捕获阶段”不会接收到事件。而是在“处于目标阶段”被触发，并在事件处理中被看成“冒泡阶段”的一部分。然后，“冒泡阶段”发生，事件又传播回文档。

jquery的常用事件