jQueryHTML与插件

1.jQuery 事件机制

1.1 注册事件

bind()、on()方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数

javascript 复制代码
$("p").on({
    "click": function () {
         alert("点击了")
     },
     "mouseenter": function () {
         alert("移动了")
     }
 })

1.2 委托事件

delegate()方法为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

javascript 复制代码
$("div").delegate("span", "click", function () {
    $("span").css("background-color", "pink")
})

1.3 事件对象event

type:事件类型

which:触发该事件的鼠标按钮或键盘的键

target:事件发生的初始对象

data:传入事件对象的数据

pageX\pageY:事件发生时,鼠标位置的水平坐标\垂直坐标

1.4 each()方法

each()方法为每个匹配元素规定要运行的函数

jQuery.each()函数用于遍历指定的对象和数组

$.each(数组或对象,回调函数)

javascript 复制代码
var arr = [1, 2, 3, 4]
$.each(arr, function (index, item) {
    console.log(index, item);
})


var obj = {
    name: "zs",
    age: 18
}
$.each(obj, function (key, value) {
    console.log(key, value);
})

2.jQuery对HTML的设置与捕获

2.1 html()---设置或返回所选元素的内容

2.2 text()---设置或返回所选元素的文本内容

2.3 val()---设置或返回表单字段的值

2.4 attr()、prop()---获取和返回属性值

javascript 复制代码
//html()
$("#btn2").click(function () {
    console.log($("p").html());
})
$("#btn5").click(function () {
   $("p").html("<span>11111111</span>")
})

//text()
$("#btn1").click(function () {
    console.log($("p").text());
})
$("#btn4").click(function () {
    $("p").text("1111111111")
})

//val()
$("#btn3").click(function () {
    console.log($("#btn3").val());
    $("#btn3").val("666")
})
//attr()
$("#btn7").click(function () {
    $("p").attr("class", "two")
     console.log($("a").attr("href", "www.jd.com"));
})

3.jQuery对Html的页面尺寸操作

3.1width() height()

设置或返回元素的宽度和高度,不包括边框和内外边距

3.2innerWidth() innerHeight()

返回元素的高度,包括内边距

3.3outerWidth() outerHeight()

返回元素的高度,包括内边距和边框

3.4scrollTop() scrollLeft()

设置或返回滚动条被卷出去的元素的高度和宽度

4.jQuery添加元素和删除元素

4.1append()

在被选元素的结尾插入内容(仍然在该元素的内部)

4.2prepend()

在被选元素的开头插入内容(仍然在该元素的内部)

4.3after() before()

after()在被选元素之后插入内容

before()在被选元素之前插入内容

4.4删除元素、内容

remove()---删除被选元素及其子元素(自己和子元素都删除了,本身已删除,所以不占位置)

empty()---从被选元素中删除子元素(只是把子元素删除掉了,本身没有删除,所以本身占位)

5.jquery.color.js的使用

(1)引入JS文件

jquery中的animate不支持变色,但是使用jquery.color.js,就可以变色,.color.js依赖于jquery

所以需要先引入jquery.js

javascript 复制代码
//引入
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.color.js"></script>

<script>
    $("#btn").on("click", function () {
        $("div").animate({ "width": 200, "background-color": "red" }, 2000, function () {
            alert("动画结束")
        })
    })
</script>

6.jquery.lazyload.js的使用

懒加载原理:浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。它可以延迟加载长页面中的图片在浏览器可视区域外,图片不会被载入,直到用户将页面滚动到它们所在的位置。

javascript 复制代码
//引入文件
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.lazyload.js"></script>

<script>
     $("img").lazyload()
</script>

7.jquery.ui.js的使用

javascript 复制代码
//引入
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css"/>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>


//操作日期选择器    datepicker()
<input type="text"name="date"id="date"/>
<script
    $("#date").datepicker();
</script>
相关推荐
Baklib梅梅16 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士16 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing16 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea17 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~17 小时前
CSS——重排和重绘
前端
个人看法18 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
知识分享小能手18 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang19 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范
小高00719 小时前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
Hashan19 小时前
elpis-core:基于 Koa 的轻量级 Web 应用框架
前端·javascript·node.js