jQuery

最新推荐文章于 2024-07-23 12:35:43 发布

qq_2915530976

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量85

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_48819167/article/details/129283454

版权

jQuery js 函数库 write less do more
写·更少，做更多
封装简化 dom 操作（增删改查）

jquery 核心函数 $/jQuery
jQuery 核心对象执行$()返回的对象

HTML 元素操作方便（强大选择器：快速查找 dom 元素）
隐式遍历：一次操作多个元素
HTML 事件处理
css 操作
链式调用
读写合一（一个方法操作）：不传入参数一般都是读，传入参数一般都是写 attr(),html(),prop()等等
浏览器兼容
易扩展插件
Ajax 封装

本地引入 cdn 引入（更快）
测试版生产板

jquery 核心函数 $/jQuery
当成一般函数 $(params)

param 是函数
- 相当于 window.οnlοad=function()(文档加载完成的监听)
param 是选择器字符串
- 查找所有匹配的 dom 元素，返回包含所有的 dom 元素的 jQuery 对象
param 是 dom 对象
- 将 dom 元素对象包装成 jQuery 对象返回($this)
param 是 html 标签字符串
- 创建标签 dom 元素对象并封装成 jQuery 对象

作为对象使用$.xxx()
- 包含所有匹配的 n 个 dom 元素的为数组对象
- 执行$()返回的就是 jQuery 对象
- 基本行为
  1. length 得到 dom 元素的个数
  2. [index]/get[index] 根据下标得到 dom 元素
  3. each()遍历输出数组中的所有元素
  4. index()

–选择器本身是一个有特定语法的规则的字符串，没有实质用处
– 基本规则 css 选择器语法，对其扩展了
–调用$(),将选择器作为参数传入才能起作用
– $()作用：根据选择器规则在整个文档中查找所有匹配的标签数组，并封装成 jQuery 对象返回

基本选择器

id
元素
类选择器
并集
交集

层次选择器

后代
子元素
后面兄弟
后面所有的匹配的选择器

过滤选择器

在原有的选择器匹配的元素中进一步的进行过滤
:first (‘div:first’) 选择第一个 div
:last (‘.box:last’) 类为 box 的最后一个
:not (‘div:not(.box)’) 类不为 box 的所有元素
:gt(index) :lt() (‘li:gt(0):lt(2)’) 注意一步一步选择的多个过滤选择器是依次执行的
（‘li:lt(3):gt(0)’）
：contains() (‘li:contains(“bbbb”)’) 选择内容为 bbbb 的 li 注意 contains 里面为双引号
：hidden (‘li:hidden’) 选择隐藏的 li
[] (‘li[title]’) 选择有 title 属性的 li
[] (‘li[title=“aaa”]’) 选择 title 属性值为 aaa 的 li

表单选择器

 可以组合使用下面的

:text
:password
:checked
:disabled
:select
:option
:submit
:reset
:radio
:file

$工具方法

$.each(对象，回调) 回调参数 key value
$,trim() 去除空格
$.type(obj) 得到数据类型
$.isArray() 判断是否数组
$.isFunction() 判断是否函数
$.parseJSON(json) json 对象->js 对象特定格式的字符串 json {} 键要双引号值看数据类型决定要不要双引号 json []json 数组
1. JSON.parse()
2. JSON.Stringfy()

属性

attr()操作属性值为非布尔值的属性 — prop()：专门操作属性值为布尔值的属性
attr(name,value)

直接使用就是读取
传入参数第一个属性名第二个属性值
设置属性如果属性名重复则覆盖该属性名

removeAttr(name)/removeprop(name) 移除属性名
addClass(属性值) 不删除以前的，直接添加
removeClass(属性值)
(‘li:first’).html(‘
mmmm
’) 加入标签结构
.val(value)/.value() 传入参数写，不传入读取
html()/html(htmlString) 读写标签体文本

样式相关

CSS

.css(属性名)

.css(‘color’) 读取

.css(属性名，属性值) 设置一个

.css(‘color’,‘red’)

.css({属性名：属性值，属性名：属性值}) 设置多个
-css({
color:‘red’,
width:200px
})

位置

相对于父元素
offset() position() scrollTop() scrollLeft()

offset() 读
offset({})设置
offset({
left:50px,
top:100px
})
position() 读不能设置写
scrollTop() 读取 y 坐标不同的浏览器有不同的设置对象 body 或 html
- scrollTop(数值) 设置滚动条到指定位置
- scrollTop(200)

内容尺寸

宽高

.width() width
.height() height

内部尺寸

宽高内边距

.innerwidth() width+padding
.innerheight() height+padding

外部尺寸

宽高内边距外边距
传布尔值决定是否加外边距

outerwidth(false/true) 默认为 false height+padding+border 为 true 加上 margin
outerheight(false/true) 默认为 false height+padding+border 为 true 加上 margin

筛选

过滤过滤的当前元素的其中的一些元素

first()
last()
filter(‘[属性名=属性值]’) 有某个属性名且值为某个数
not(‘[属性名=属性值]’)或 filter(‘[属性名!=属性值]’) 没有这个属性的
filter(‘[属性名][属性名=属性值]’) 或者 filter(‘[属性名!=属性值]’).filter(‘[属性名]’) 有某个属性但值不是某个数
has()

查找查找元素的子孙,兄弟，父元素，不是当前的这个/些元素

括号里面可以具体传参进行具体的下一步选择

children() 查找子标签
find() 查找后代标签
parent() 查找父标签
preveAll() 查找前面的所有标签
sliblings()查找所有的兄弟标签

文档处理

内部插入

append(‘标签’) 添加 dom 节点 append(‘’)
创建好的标签.appendTo(‘某个标签里面’) $(" < s p an >< / s p an > ") . a p e n d T o (^{'}$ ul’)
preappend(‘标签’)
创建好的标签.preappendTo(‘某个标签里面’) $(" < s p an >< / s p an > ") . p re a p e n d T o (^{'}$ ul’)

外部插入

before(‘标签’) 插入某个标签之前
after(‘标签’) 插入某个标签之后

替换

替换的标签.repalceAll(‘被替换标签’) 替换所有的标签
被替换的标签.repalceWith(‘替换的标签’)

删除

remove(‘标签’) 移除子标签
empty(‘标签’) 移除当前的标签，包括子标签

事件

事件处理

绑定事件

on(事件，回调函数)

click(回调函数)
mouseenter() 鼠标进入 mouseover
mouseleave() 鼠标离开 mouseout
hover(移入回调函数，移出回调函数)使用的 mouseenter 和 mouseleave
mousemover mouseenter 区别
mouseover 在移入子元素时也会触发
mouseenter 只有移入当前元素才会触发