前端jQuery

前端jQuery

1.选择器、样式操作、效果

jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)

注意:

只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。

jQuery 的下载**

jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。

各个版本的下载:https://code.jquery.com/

jQuery的入口函数

​ jQuery中常见的两种入口函数:

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐,但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

相当于原生 js 中的 DOMContentLoaded

jQuery 对象和 DOM 对象转换

// 1.DOM对象转换成jQuery对象,方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法:
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)
 

总结:实际开发比较常用的是把DOM对象转换为jQuery对象

jQuery 选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可,但是要加引号 和CSS选择器写法一致

筛选选择器

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

筛选方法

语法 用法 说明
parent() $(‘li’).parent(); 查找父级
children(‘选择器’) $(“ul”).children(“li”); 查找最近一级的亲儿子 相当于$(“ul>li”)
find(‘选择器’) $(“ul”).find(“li”); 相当于$(“ul li”) 和后代选择器一样
siblings(‘选择器’) $(".first").siblings(“li”); 查找兄弟节点,不包括自身
nextAll([expr]) $(".first").nextAll(); 查找当前元素之后所有的兄弟元素
prevAll([expr]) $(".first").prevAll(); 查找当前元素之前所有的兄弟元素
hasClass(class) $(“div”).hasClass("protected"0; 检查当前的元素是否含有某个特定的类,如果有 返回true
eq(index) $(“li”).eq(2); 相当于$(‘li:eq(2)’),index是从0开始的

jQuery样式操作

排他思想

// 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings().css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
// 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏,不用循环操作


// 以前的js是不允许对于一组对象之间操作的,只能对一个元素对象进行操作
var divs = document.getElementsByTagName('div');
divs.style.backgroundColor = 'red'; // 错误
divs[0].style.backgroundColor = 'red'; // 正确

链式编程

// 链式编程是为了节省代码量,看起来更优雅。
//原代码
$(this).css('color', 'red');
$(this).sibling().css('color', ''); 
//链式编程的代码
$(this).css('color', 'red').sibling().css('color', ''); 

//jq的操作方法: css(),hide(),show()等等,会将调用者返回
//jq的筛选方法,会将筛选完的对象返回。 非筛选方法(操作方法),会将调用者(jq对象)返回

jQuery 得到当前元素索引号

$(this).index();

jQuery弹窗(类似alert)

var isC = confirm('您确定要退出吗') //点击后返回布尔值

jQuery操作 css 方法

// 1.参数只写属性名,则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color'', 'red');

// 3.  参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

jQuery设置类样式

// 1.添加类
$("div").addClass("current");  // className,classList

// 2.删除类
$("div").removeClass("current");

// 3.切换类  没有就添上  有就移除
$("div").toggleClass("current");

原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名

jQuery 效果

显示、隐藏、二者切换

显示

语法: show( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

隐藏

语法: hide( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

切换

语法: toggle( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

滑动

下拉滑动

语法: slideDown( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

上拉滑动

语法: slideUp( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

滑动切换

语法: slideToggle( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

淡入淡出 (透明度动画)

淡入

语法: fadeIn( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

淡出

语法: fadeOut( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

淡入淡出切换

语法: fadeToggle( [ speed ,[easing],[fn] ] ) 参数都可以省略

1.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

2.easing: 用来指定切换效果,默认swing,还有linear,要带引号

3.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

修改透明度

语法: fadeTo( [ speed , opacity ,[easing],[fn] ] ) 参数都可以省略

  1. opacity 透明度,必须写,取值0~1之间
  2. speed: 必须写 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)
  3. easing: 用来指定切换效果,默认swing,还有linear,要带引号
  4. fn: 回调函数,在动画完成时执行的函数,每个元素执行一次
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

自定义动画

语法:animate( params, [speed ] , [easing] , [fn] )

1.params:想要改变的样式属性,以对象形式传递,必须写

2.speed: 按照某种速度显示,默认normal,还有slow、fast,要带引号,也可直接设置毫秒数(不带单位)

3.easing: 用来指定切换效果,默认swing,还有linear,要带引号

4.fn: 回调函数,在动画完成时执行的函数,每个元素执行一次

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

停止动画排队

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行

停止动画排队的方法为:stop() ;

  • stop() 方法用于停止动画或效果。
  • stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。

总结: 每次使用动画之前,先调用 stop() ,在调用动画。

事件切换

hover([over,]out)     // 其中over和out为两个函数
  • over:鼠标移到元素上要触发的函数(相当于mouseenter)
  • out:鼠标移出元素要触发的函数(相当于mouseleave)
  • 如果只写一个函数,则鼠标经过和离开都会触发它

2.属性、元素、尺寸、位置操作

jQuery 属性操作

获取和设置元素固有属性值 prop()

1.获取元素固有属性: element.prop(‘属性名’);

2.设置元素固有属性: element.prop(‘属性名’,‘属性值’);

​ 注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。

获取和设置元素自定义属性值 attr()

1.获取元素自定义属性: element.attr(‘属性名’);

2.设置元素自定义属性: element.attr(‘属性名’,‘属性值’);

数据缓存 data()

1.获取数据缓存: element.date(‘数据名’);

2.设置数据缓存: element.date(‘数据名’,‘数据值’);

选择器 :checked

例:console.log($(".j-checkbox:checked").length);

jQuery 文本属性值

常见操作有三种:html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性

普通元素内容html()

1.html() //获取元素内容

2.html(‘内容’) //设置元素内容

普通元素文本内容text()

1.text() //获取元素的文本内容

2.text(‘内容’) //设置元素的文本内容

表单的值val()

1.val() //获取表单的值

2.val(‘内容’) //设置表单的值

注意:html() 可识别标签,text() 不识别标签

选择器parents

parents(‘选择器’) 可以返回指定祖先元素

保留几位小数

num.toFixed(位数)

jQuery 元素操作

遍历元素

  1. $(‘选择器’).each(function ( index , ele ) {…;} ) index是索引号,ele是每个DOM元素对象
  2. $.each( object , function ( index , ele ) { …; } )

​注意:此方法用于遍历 jQuery 对象中的每一项,回调函数中元素为 DOM 对象,想要使用 jQuery 方法需要转换。

演示代码

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象,也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据,处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>

创建、添加、删除

1.创建

$(’

  • ')

    2.内部添加

    element.append(’ 内容 ') 把内容放入匹配元素内部最后面,类似于appendChild

    element.prepend(’ 内容 ') 把内容放入匹配元素内部最前面,类似于

    3.外部添加

    element.after(’ 内容 ') //把内容放入目标元素后面

    element.before(’ 内容 ') //把内容放入目标元素前面

    4.删除

    element.remove() //删除匹配的元素(自身)

    element.empty() //删除匹配的元素集合中所有的子节点

    element.html(’’) //清空匹配的元素内容

    jQuery 尺寸、位置操作

    尺寸操作

    语法 用法
    width()/height() 取得匹配元素宽度或高度,只算width/height
    innerWidth()/innerHeight() 取得匹配元素宽度或高度,包含padding
    outWidth()/outHeight() 取得匹配元素宽度或高度,包含paddin、border
    outWidth(true)/outHeight(true) 取得匹配元素宽度或高度,包含paddin、border、margin

    如果参数为数字,则是修改相应值

    jQuery 位置操作

    jQuery的位置操作主要有三个: offset()、position()、scrollTop()/scrollLeft()

    1.offset()设置或获取元素偏移

    和父亲没有关系,是相对于文档的偏移坐标

    该方法有2个属性left、top。offset().top/left 用于获取距离文档顶部/左侧的距离

    可以设置元素的偏移: offset( { top:10,left:10 } )

    2.position()获取元素偏移

    和父亲有关系,是相对于父亲的偏移坐标,如果父亲都没有定位,则以文档为准

    该方法有2个属性left、top。offset().top/left 用于获取距离文档顶部/左侧的距离

    该方法只能获取数据,不可以进行设置

    3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部或左侧

    不加参数是获取,加参数则是设置被卷去的头部,参数不带单位

    代码演示

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
            
        <div class="back">返回顶部</div>
        <div class="container"></div>
       
        <script>
            $(function() {
                // 1. 获取设置距离文档的位置(偏移) offset
                console.log($(".son").offset());
                console.log($(".son").offset().top);
                // $(".son").offset({
                //     top: 200,
                //     left: 200
                // });
          
                // 2. 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准
                // 这个方法只能获取不能设置偏移
                console.log($(".son").position());
                // $(".son").position({
                //     top: 200,
                //     left: 200
                // });
          
          		// 3. 被卷去的头部
          		$(document).scrollTop(100);
                // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
                // 页面滚动事件
                var boxTop = $(".container").offset().top;
                $(window).scroll(function() {
                    // console.log(11);
                    console.log($(document).scrollTop());
                    if ($(document).scrollTop() >= boxTop) {
                        $(".back").fadeIn();
                    } else {
                        $(".back").fadeOut();
                    }
                });
                // 返回顶部
                $(".back").click(function() {
                    // $(document).scrollTop(0);
                    $("body, html").stop().animate({
                        scrollTop: 0
                    });
                    // $(document).stop().animate({
                    //     scrollTop: 0
                    // }); 不能是文档而是 html和body元素做动画
                })
            })
        </script>
    </body>
    

    页面滚动事件

    $(window).scroll( function () {…} )

    3.事件、插件

    jQuery 事件处理

    on() 绑定事件

    语法: element.on( ‘事件类型’, ’ 元素的子元素选择器 ’ , fn(){…} );

    1.可绑定多个事件

    例:

    $(' 选择器').on( { 
    	click : function () {},
    	mouseover: function () {},
    	.......  });
    

    2.可以进行事件委派操作,把需要加给子元素身上的事件绑定在父元素身上

    $(' ul').on( 'click','li',function () { ...... }  );
    

    3.动态创建的元素,用click()这种没法绑定事件,on()可以给动态生成的元素绑定事件,通过事件委托绑定的事件,可以对未来元素生效

    off() 解绑事件

    off()方法可以移除通过on()方法添加的事件

    1.$(’ p ').off() //解绑p元素所有事件

    2.$(’ p ‘).off(’ click ') //解绑p元素上面的点击事件

    3.$(’ ul ‘).off(’ click ‘,’ li’) //解绑事件委托

    只触发一次的事件

    element.one();

    trigger() 自动触发事件

    1.element.click()

    2.element.trigger(‘事件类型’)

    3.element.triggerHandler(‘事件类型’) //这一种不会触发元素的默认行为 而上面的会

    jQuery 事件对象

    element.on( ‘事件类型’, ’ 元素的子元素选择器 ’ , fn( e ){…} );

    阻止默认行为:e.preventDefault()或者return false

    阻止冒泡:e.stopPropagation()

    jQuery 插件

    jQuery 插件常用的网站:

    1. jQuery 插件库 http://www.jq22.com/
    2. jQuery 之家 http://www.htmleaf.com/

    插件的使用三点: 1. 引入css. 2.引入JS 3.引入html。 (有的简单插件只需引入html和js,甚至有的只需引入js)

    你可能感兴趣的:(jQuery,前端)