9.jQuery初识—选择器、效果

2022-09-01 22:04:46

一、初识jQuery

js缺点：

书写繁琐，代码量大。
代码复杂。
动画效果很难实现。使用定时器，要小心各种定时器的清除。各种操作和处理事件不好实现。
浏览器的兼容性。

jQuery

轻量级的js框架，不影响页面加载速度
使用比js简单、方便
事件、样式、动画支持
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信
插件扩展开发，jQuery有着丰富的第三方插件，
链式表达，jQuery的链式操作可以将多个操作写在一行代码中
兼容性好

jquery对象和dom对象

jquery找的标签对象称为——jquery对象

原生js找到的标签对象称为——dom对象
dom对象只能使用dom对象的方法，不能使用jquery对象的方法

jquery对象也是
转换

jquery对象转dom对象——jquery对象[0] 示例：$(‘#d1‘)[0]

dom对象转jquery $(dom对象)

二、jquery文件的引入和加载

jquery-3.3.1.js 较大，一般是用在开发环境下。
jquery-3.3.1.min.js 更小，一般是用在生产环境下。

引入方式

直接写在<script>里js代码
```
<script src="jquery.js"></script>
```
写在window.load = function(){}里的js代码。window.onload必须等到页面内包括的所有元素加载完毕之后才执行。

三、jquery基础选择器

使用jquery的时候要有入口函数——回调函数。

//方式1
$(function (){
    函数体;
})
//方式一
$(dociment).ready(function(){
    函数体;
})

1、id选择器

console.log($(‘#brother‘));
$(‘brother‘).css(‘color‘, ‘red‘);	//设置样式

2、标签选择器

//（1）设置一个值
$(‘a‘).css(‘color‘, ‘red‘);
//（2）设置多个值，设置多个值的时候使用对象存储 key:value
$(‘a‘).css({‘color‘:‘red‘, ‘font-size‘:10px});

3、类选择器

$(‘.c1‘).css(‘background‘, ‘green‘)

4、通配符选择器*

console.log($(‘*‘));
/* 取出所有的标签
jQuery.fn.init(17) [html, head, meta, title, style, body,
 ul, li#brother, li, a, li.li3, li, li, li, li,
 script, script, prevObject: jQuery.fn.init(1)] 
 */
// 应用：实现清空整个界面的元素
$(‘*‘).html(‘‘);

四、jquery层级选择器

1、后代选择器 div a

$(‘div p‘).css(‘color‘, ‘red‘);
$(‘#box p‘).css(‘color‘, ‘red‘);

2、子代选择器 div > a

$(‘#box>p‘).css(‘color‘, ‘red‘);

3、毗邻选择器

$(‘#father+p‘).css(‘font-size‘, ‘24px‘)

4、兄弟选择器

$(‘father~p‘).css(‘background‘, ‘red‘)

5、组合选择器

$("#id, .className, tagName")

五、基本过滤选择器

1、:first 获取第一个元素

获取第一个option标签，修改文本内容

$(‘li:first‘).text(‘first‘);

2、:last 获取最后一个元素

$(‘li:last‘).html(‘last‘)

3、:odd匹配所有索引值为奇数的元素，从0开始计数

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

4、:even匹配所有索引值为偶数的元素，从0开始计数

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

5、:eq(index)获取给定索引值的元素从0开始计数

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

6、:gt(index) 匹配所有大于给定索引值的元素

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

7、:lt(index) 匹配所有小于给定索引值的元素

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

冒号表示匹配或选取的意思：$(":button") 表示匹配所有的按钮。

$("input:checked")表示匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)。

六、jquery属性选择器

1、标签名[属性名]查找所有含有属性的该标签的元素

$(‘li[id]‘).css(‘color‘, ‘red‘);

2、标签名[alter=value]匹配给定的属性是某个特定值的元素

$(‘li[class=cc]‘).css(‘font-size‘, ‘30px‘);

3、[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素

$("li[class!=cc]").css(‘color‘, ‘red‘);

4、[attr^=value]匹配给定的属性是以某些值开始的元素

$("input[name^=username]").css(‘background‘, ‘red‘);

5、[attr$=value]匹配给定的属性是以某些值结尾的元素

$(‘input[name$=doc]‘).css(‘background‘, ‘red‘);

6、[attr*=value]匹配给定的属性是以包含某些值的元素

$(‘button[class*=btn]‘).css(‘background‘,‘red‘)

七、jquery筛选选择器

选择器或者筛选器选择出来都是对象。筛选器方法就是通过对象调用一个进一步过滤作用的方法，

下一个：

$(‘#id‘).next()		//找到下一个兄弟标签
$(‘#id‘).nextAll()	//找到下面所有的兄弟标签
$(‘#id‘).nextUntil(‘#i2‘)	//直到找到id为i2的标签就结束查找，不包含他

$(‘#I2‘).next().next().text();   //链式

上一个：

$(‘#id‘).prev()
$(‘#id‘).prevAll()
$(‘#id‘).prevUntil(‘#i2‘)

父亲元素

$(‘#id‘).parent()		
$(‘#id‘).parents()		//查找当前元素的所有父辈元素（爷爷辈、祖先辈都能找到）
$(‘#id‘).parentUntil(‘body‘)	//查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用

儿子和兄弟元素

$(‘#id‘).children();
$(‘#id‘).siblings();	//兄弟们，不包含自己， .siblings(‘#id‘), 也可以在添加选择器进一步筛选

find查找所有的后代元素

$(‘ul‘).find(‘#l3‘);		//类似于 $(‘ul #l3‘)

filter过滤

$(‘li‘).filter(‘#l3‘);

八、jquery效果——显示隐藏

js中的三种隐藏和显示的方法，

1、通过.css设置属性，来控制显示、隐藏

//通过.css属性，来控制显示、隐藏
$(‘btn‘).click(function (){
    $(‘#box‘).css(‘display‘, ‘block‘);
})

2、Jquery提供方法show()、hide()控制元素显示隐藏

show:

show(spend, callback)

speed：三种预定速度的字符串(‘show‘,‘normal‘, ‘fast‘)或表示动画时长的毫秒值(1000毫秒==1秒)
callback:在动画完成时执行的函数，每个元素执行一次。

hide:

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

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

var isShow = true;
$(‘#btn‘).click(function () {
    if (isShow) {
        // show(speed,callback)
        $(‘#box‘).show(‘show‘,function () {
            // alert(111);
            $(this).text(‘盒子出来了‘);
            isShow = false;
            $(‘#btn‘).text(‘隐藏‘);
        })
    } else {
        // 动画时长的毫秒值2000ms
        $(‘#box‘).hide(2000,function () {
            $(this).text(‘盒子消失了‘);
            isShow = true;
            $(‘#btn‘).text(‘显示‘);
        })
    }
})

3、toggle开关

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

　如果是仅仅显示和隐藏盒子，不需要操作文字，推荐使用toggle方法。

$(‘#btn‘).click(function () {
    $(‘#box‘).toggle(3000,function () {
        alert(111);
    });
})

九、jquery效果——slide高度变化显示隐藏

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

2、slideUp：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。用法和参数跟上面类似。

　　运用hover来触发回调，鼠标浮动其上触动显示和隐藏：

$(function () {
    $(‘#btn‘).hover(function () {
        $(‘#box‘).slideDown(2000);
 
    },function () {   // 第二个回调函数
        $(‘#box‘).slideUp(‘slow‘);
    })
})

3、slideToggle：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。和toggle用法类似。

$(‘#btn‘).click(function () {
    $(‘#box‘).slideToggle(‘fast‘);
})

十、jQuery效果——fade不透明度变化

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

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

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

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

3、fadeTo：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

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

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

　　这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。实现淡入淡出的效果就是使用此方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果——slide</title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*display: none;*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
 
    </div>
    <button id="btn">隐藏</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
 
    $(function () {
        // $(‘#btn‘).click(function () {
        $(‘#box‘).mouseover(function () {  // 鼠标移动上去逐渐隐形
            $(‘#box‘).fadeOut(2000);
            /* 点击后内部样式表变为如下：
            <div id="box" style="display: none;"></div>
             */
        })
 
        $(‘#btn‘).mouseout(function () { // 鼠标移动上去逐渐现形
            // $(‘#box‘).fadeIn(2000);
            $(‘#box‘).fadeTo(2000,0.3);
        })
         
        $(‘btn‘).click(function () {
            $(‘#box‘).fadeToggle(3000);
        })
    })
</script>
</html>

十一、jquery效果——animate动画

这是用于创建自定义动画的函数。

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

params:一组包含作为动画属性和终值的样式属性和及其值的集合。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。

$(function () {
    $(‘#btn‘).click(function () {
        /*
        // params:一组包含作为动画属性和终值的样式属性和及其值的集合
        $(‘#box‘).animate({
            width: ‘200px‘,
            height: ‘300px‘
        })
        */
 
        // 动画效果向右下方向移动
        $(‘#box‘).animate({left:‘100px‘,top: ‘200px‘});
 
        // 动画队列:动画效果是先右移、再下移
        $(‘#box‘).animate({left:‘100px‘}).animate({top: ‘400px‘});
 
        // 在运行时，stop方法停止动画
        $(‘#box‘).animate({left:‘100px‘,top:‘300px‘}, 2000);
 
        // delay方法延迟操作
        $(‘#box‘).animate({left:‘100px‘}).delay(2000).animate({top: ‘400px‘});
    })
 
    $(‘#stop‘).click(function () {
        $(‘#box‘).stop()
    })
})

1、stop：停止所有在指定元素上正在运行的动画

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

　　参数：clearQueue:如果设置成true，则清空队列。可以立即结束动画。

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

2、delay：概念：用来做延迟的操作

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

十二、利用jquery效果——弹出广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出广告</title>
    <style type="text/css">
 
    </style>
</head>
<body>
    <div id="box" style="width: 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none">
        <img src="广告.png" style="width: 100%;height: 100%;"/>
    </div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // 排队去干活
        $(‘#box‘).slideDown(‘normal‘).slideUp(‘fast‘).fadeIn(1000).click(function () {
            $(this).fadeOut(1000);   // 点击盒子1秒时间淡出
        });
    })
</script>
</html>