H5基础_8_Jquery

最新推荐文章于 2024-09-25 14:00:00 发布

Odoo老赵

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量95

点赞数

分类专栏： 14_大前端文章标签： jquery javascript ecmascript

本文链接：https://blog.csdn.net/jiafeitutu/article/details/130906635

版权

14_大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery是一个快速、简洁的JavaScript库，封装了许多DOM操作、事件处理、Ajax交互等功能。它提供了如$(document).ready()的入口函数、$作为顶级对象以及选择器、筛选方法、样式操作、动画效果等。文章详细介绍了jQuery的基础知识和常用API，包括元素选择、遍历、事件绑定及解除、插件使用等方面。

摘要由CSDN通过智能技术生成

灵魂拷问：

浏览器能干什么？

我能让浏览器干什么？

在这里插入图片描述

jquery

对jquery我只想说一句话,太过于经典,不得不学,代表一个时代.

jquery概述

JavaScript库，封装了大量的js方法。

常见的JavaScript库：

jQuery

Prototype

YUI

Dojo

Ext JS

移动端的zepto

jQuery是一个快速、简洁的JavaScript，设计宗旨是 “write less，Do More”

jQuery封装了JavaScript常用的功能代码，优化了Dom操作，事件，ajax等。

学习jQuery的本质：就是学习调用这些方法。

优点：

轻量级，几十K
跨浏览器兼容
链式编程隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发，有丰富的第三方插件，例如树形菜单，日期控件，轮播图等
免费开源

jquery入口函数：

DOM树加载完就执行，不必等所有外部资源都加载完成。  相当于原生js的 DOMContentLoaded
第一种写法：
$(document).ready(function(){
	.....
})
// 第二种写法
$(function(){
    .....
})

jQuery的顶级对象 $

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

2 $是 j Q u ery 的顶级对象，相当于原生 j s 的 w in d o w, 把元素利用$ 包装成jQuery对象，就能调用jquery方法

jQuery对象和DOM对象

用原生js获取的对象是DOM对象

用jQuery获取的对象是jQuery对象，是一个伪数组

二者是不同的

jquery对象只能使用jquery的方法，Dom对象则使用原生Js的方法

二者可以相互转换：

DOM对象转换成jQuery对象： $(DOM对象)

jQuery对象转成Dom对象 $(‘div’)[0].play() 或者 $(‘div’).get[0].play();

jQuery对象是Dom对象的数组。

jQuery常用API

jQuery选择器

$(css选择器) 跟css选择器基本相同

parent() 亲爹

parents(“.zuzong”) 叫zuzong的祖先元素

$(“li:eq(2)”) 第2个li，从0计数

隐式迭代，匹配所有元素，循环设置

$('div').css('background','pink')

jQuery筛选选择器：

$("li:first")
$("li:last")
$("li:eq(2)")
$("li:odd")    
$("li:even")

jQuery 筛选方法（重点）

$("li").parent();           //查找父级
$("li").children("li");	     // 查找亲儿子
$("li").find(”li“);             //查找后代
$(".first").siblings("li");    //查找兄弟节点，不包括自身
$(".first").nextAll();          //当前元素之后的所有同辈元素
$(".last").prevAll();         //当前元素之前的所有同辈元素
$("div").hasClass("protected");    //检查当前的元素是否含有某个特定的类，如果有，则返回true
$("li").eq(2);                // 相当于$("li:eq(2)"),index从0开始

jquery排他思想

$(function(){
	$("button").click(function(){
		$(this).css("background","pink");
		$(this).siblings("button").css("background","");
	})
})

jquery链式编程

$("#left").css("color","pink").parent().css("color","green")

操作样式：

css方法：

$('div').css("color")      //读color属性
$('div').css("color","red")  //写color属性 
$('div').css({
	width:400,
	height:400,
	backGroundColor:"red"   //如果是复合属性必须采用驼峰命名法，如果值不是数字，则需要加引号
})

设置类样式方法：
$('div').addClass("current")
$('div').removeClass("current")
$('div').toggleClass("current")  切换类，如果有就移除，没有就加上

DOM中的className会覆盖原先的值

而jquery的addClass不会覆盖原先的类名。

jquery的显示与隐藏效果

显示隐藏

show（）

hide（）

toggle（）

可以跟参数实现动画效果 hide（‘fast’） hide（1000）

滑动：

slideDown()

slideUp（）

slideToogle（）

这三个参数跟上面的hide、show一模一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>

    <button>show</button>
    <button>hide</button>
    <button>toggle</button>
    <div></div> 
    <script>
        $(function(){
            // $('button').eq(0).click(function(){
            //     $('div').show(1000);
            // })
            // $('button').eq(1).click(function(){
            //     $('div').hide(1000);
            // })
            // $('button').eq(2).click(function(){
            //     $('div').toggle(2000);
            // })

            $('button').eq(0).click(function(){
                $('div').slideDown();
            })
            $('button').eq(1).click(function(){
                $('div').slideUp();
            })
            $('button').eq(2).hover(function(){
                $('div').slideToggle();
            })
        })

    </script>

</body>
</html>

停止动画排队效果， stop() 结束上一次动画。

$(‘div’).stop().slideToggle();

淡入淡出效果：

fadein

fadeout

fadeto

jquery 属性操作

元素属性操作：

1、固有属性 prop

$('div').prop('width')
$('div').prop('width',100)

2、自定义属性 attr ,包括h5的 data开头的属性

$('div').attr('index')
$('div').attr('index',1)

3、数据缓存 data() 页面刷新失效

$(".book").data("price",100)

jquery获取和修改元素内容

//  获取和设置innerHtml
$(".book").html()     //获取元素内容
$(".book").html("123123")     //设置元素内容

//  获取和设置innerText
$(".book").text()     //获取元素内容
$(".book").text("123123")     //设置元素内容

//  获取和设置表单元素value
$(".book").val()     //获取元素内容
$(".book").val("123123")     //设置元素内容

jQuery元素操作

遍历，增加，删除，修改

遍历：

$('button').each(function(index,eButton){
console.log(eButton.innerHTML);
console.log(index);
})

//$.each 主要用于遍历数据
arr = [1, 2, 3, 'abc']
$.each(arr, function (i, v) {
console.log(i, v);
})

增加元素：

var li= $("<li></li>")      创建元素
//内部添加， 加儿子
$('ul').append(li)
$('ul').prepend(li)

var div=$("<div> 我是兄弟元素</div>")
// 外部添加,添加兄弟元素
$('.text').after(div)
$('.text').before(div)

删除元素

$('ul').remove()  删除自己
$('ul').empty()   删除儿子  等价于 $('ul').html("")

jQuery尺寸位置操作

$("div").width()     // 内容宽度
$("div").innerWidth()     // 包含padding的宽度
$("div").outerWidth()     // 包含padding、border的宽度
$("div").outerWidth(true)     // 包含padding、border、margin的宽度

offset（）     元素相对于文档的位置，跟父盒子没关系，相当于pageX，pageY（可读可写）
$(".div").offset().left
$(".div").offset().top

position（）   获取相对于带有定位的父亲的元素坐标（只读）
scrollTop（）
scrollleft（）
$("window").scroll(function(){
	$("html,body").scrollTop(0);
})

jQuery 事件

事件注册

// 单个注册
$(".div").click(function(){
	..... 
})
// on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：  element.on(events,[selector],fn)
1、events: 一个或多个用空格分隔的事件类型，如“click”，或“keydown”
2、selector： 元素的子元素选择器
3、fn：  回调函数

// 用on的优势：  1 可以实现事件委托    2通过事件委托可以自动为新建的元素绑定事件 
// 绑定事件用on就够了

$("div").on({
    mouseover:function(){
    $(this).css('background',"red");
	},
    mouseout:function(){
    $(this).css('background','blue');
	},
    click:function(){
    $(this).css('background','yellow');
    }
})

$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass("current");
})

// 事件委托
        $("ul").on("click","li",function(){
            $(this).css('background','yellow');
        })

解绑事件

$('.div').off()   // 解绑所有事件
$('.div').off("click")   // 解绑click事件
$('.div').off("click","li")   // 解绑事件委托

one 只触发一次

$("p").one('click',function(){
	.....
})

自动触发事件

$("div").click();
$("div").trigger("click");
$("div").triggerHandler("click"); // 不会触发元素的默认行为

jquery事件对象

跟原生的事件对象一样。

$("div").on("click",function(e){
 	e.preventDefault();  //阻止默认行为
 	e.stopPropagation();  //阻止事件冒泡
})

jquery其他方法

拷贝对象

$.extend(destTarget,sourceTarget)

深拷贝—完全拷贝$.extend(true,destTarget,sourceTarget)

浅拷贝—引用类型传的是地址

多库共存：

如果$被其他库占用，怎么办呢？

1 可以用jQuery代替$

2 var jq= jQuery.noConflict();

定义jq代替jQuery

jQuery插件：

1、jQuery插件库 http://www.jq22.com

2、jQuery之家 http://www.htmleaf.com

插件使用：

1、引入相关js，css文件

2、查看demo，复制相关代码

常用插件：

瀑布流

图片懒加载 EasyLasyload

全屏滚动 fullpage.js

gitHub: https://github.com/alvarotrigo/fullPage.js

中文翻译网站： http://www.dowebok.com/demo/2014/77/

bootstrap相关插件

bootstrap 依赖jquery，所以引入js的时候要先引入jquery

http://v3.bootcss.com

Odoo老赵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录