Jquery笔记

最新推荐文章于 2024-10-27 11:25:22 发布

乌索pu

最新推荐文章于 2024-10-27 11:25:22 发布

阅读量130

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_45963655/article/details/125763244

版权

本文详细介绍了如何使用JQuery实现模块化编程，区别于window.onload的方法，以及如何与DOM对象交互。涵盖了CSS、DOM选择器、类操作、动画、动态节点创建、事件绑定和自定义插件等内容，适合前端开发者深入理解并实践jQuery技巧。

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

JQuery:利用闭包JS自定义模块；
入口函数:$(document).read(function(){}) 或者 $function(){}) 区别：1.window.onload()只有1个；Jquery可以多个 2.JQuery优先级大于onload；因为Jquery只要等待dom树加载完成，onload要等待所有资源加载 JQuery与Dom对象转换：$ (dom对象) <=> $(dom对象)【下标】
方法：
$().text(‘设置的文本’) ：获取包括后代元素纯文本，不会解析标签和innerText类似
$css({'属性'，'值'})：获取第一个dom对象样式；设置样式（内联样式）选择器：过滤选择器：$ (‘li:eq(索引)’)
筛选选择器： $(^{'} u l^{'}) . c h i l d r e n (^{'} l i^{'}) < = >$ (‘ul>li’)
$(^{'} u l^{'}) . f i n d (^{'} l i^{'}) < = >$ (‘ul li’)
$(‘ul’).parent(‘li’)
$(^{'} u l^{'}) . e q (i n d e x) < = >$ (‘li:eq(索引)’)
$(^{'} u l^{'}) . s i b l i n g s (^{'} l i^{'}) < = >$ (‘ul~li’)
class类操作：
$().addclass(类1 类2)
$().removeclass(类1 类2)【不加参数移除所有类】
$().hasclass(类1)【判断存在类】
$().toggleclass(类)【切换类，有则删，无则加】
动画：
$().show（time,fun）：
$().hide（time,fun）：
$().toggle(time)：
$().animate({style},time,speed，callback（可以嵌套动画）)：【(如果样式名中含有-号，要改成驼峰命名法)】
$().stop(bool,bool):是否清除队列，是否到达最终效果
动态创建节点：
$().html()：获取【第一个】dom对象的包括后代元素文本（包括标签），会解析标签和innerHtml类似
$() . a p p e n d ($ (‘dom对象’))：需要添加进页面，和document.creatElement（元素名）类似
标签节点操作：
$().append()：父标签下最后添加新标签；操作已有标签是剪切到最后
$().prepend():父标签下第一位添加新标签；操作已有标签是剪切到最后
$(A).before(B):B添加到A之前
$(A).after(B):B添加到A之后

$().empty() ：他杀元素；清空元素内容，保留标签
$().remove(): 自杀元素；清空元素本身，包括标签

$().clone(bool【克隆事件】):克隆节点，需要append添加进页面

标签属性：
$().val():获取表单元素的内容（value）【带参是设置】
$().attr({}):操作节点属性【不能操作bool值】
$().removeAttr(‘属性1 属性2’)：删除属性
$().prop(‘属性’，‘值’)：操作bool值属性
尺寸属性：
width（）/height（）：内容宽高【带参是设置】
innerWidth/height（）：内边距+内容
outwidth/height（）：内边距+内容+边框
outwidth/height（true）：内边距+内容+边框+外边距

offset()：距离dom的距离
position（）：距离最近定位元素距离

scrollTop/Left（）：获取整个滚动条移动距离

事件绑定：
$().on(‘事件’,fun(){}):简单绑定：【不支持动态注册，即在dom加载完毕后，添加的dom元素无法注册事件】
$(‘父’).on（‘事件’,‘触发元素’,fun(){}）：委托注册，支持动态注册
$().off()：解绑所有事件【带参是解绑指定的所有事件】
$on('自定义事件'，fun（）{})：用$ ().trigger(‘自定义事件名’)触发
补充：
链式编程： $() . x x () . x x () ：【只有设置操作可以延续，获取无法延续】显示迭代：$ ().each(fun(index,dom对象){})
多库冲突： $. n o c o n f l i c t () 释放$ 的控制权
插件库：jq22.com UI：JQueryUI ：bootcdn
自定义插件：在JQuery的prototype添加方法