首页  思维导图  详情

JQuery基础小白

2022-03-18 11:19:40   12  举报





AI智能生成

JQuery一些基础重要内容

编程入门

学习笔记

计算机

总结

基础

作者其他创作

大纲/内容

jQuery简介与使用方式

引入jQuery库

引入方式

本地引入

CDN远程引入

引入版本

测试版（未压缩版）

生产版（压缩版）

使用jQuery

使用jQuery函数：$/jQuery

使用jQuery对象：$xxx(执行$()得到的)

jQuery的功能

HTML元素操作

CSS操作

HTML事件处理

扩展新的JQuery插件

ajax封装

使用jQuery核心函数

函数调用：$(param)

param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象

param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)

param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回

选择器

分类

基本选择器

基本常用的选择器

ID选择器

$(" #title")选取id为title的元素

标签选择器

$("h2" )选取所有h2元素

类选择器

$(" .title")选取所有class为title的元素

*通配符

$("*" )选取所有元素

selector1,selector2,selectorN并集选择器

$("div,p,.title" )

selector1selector2selectorN交集选择器

$("h2.title")

层次选择器

用来查找子元素，后代元素，兄弟元素的选择器

parent  child后代选择器

parent >child子选择器

prev+next相邻元素选择器，选取紧邻prev元素之后的next元素

prev~sibings同辈元素选择器，选取prev元素之后的所有siblings元素

过滤选择器

基本过滤选择器

:first选取第一个元素

:last选取最后一个元素

:even选取索引是偶数的所有元素（index从0开始）

:odd选取索引是奇数的所有元素（index从0开始）

:eq(index)选取索引等于index的元素（index从0开始）

:lt(index)选取索引小于index的元素（index从0开始）

:not(selector)选取去除所有与给定选择器匹配的元素

:focus选取当前获取焦点的元素

属性选择器

[attribute]选取包含给定属性的元素

[attribute=value]选取等于给定属性是某个特定值的元素

[attribute !=value]选取不等于给定属性是某个特定值的元素

[attribute^=value]选取给定属性是以某些特定值开始的元素

[attribute$=value]选取给定属性是以某些特定值结尾的元素

[attribute*=value]选取给定属性是以包含某些值的元素

[selector] [selector2] [selectorN]选取满足多个条件的复合属性的元素

使用jQuery对象

.  属性和方法

属性

操作内部标签的属性或值

attr()获取属性值 attr(value)修改属性值 removeAttr()删除属性

addClass()添加类样式函数 removeClass()

html()获取html+文本 val()获取表单的值

CSS

设置css样式/读取css值

css(styleName): 根据样式名得到对应的值

css(styleName, value): 设置一个样式

css(json格式): 设置多个样式

文档

对标签进行增删改操作

添加/替换元素

append(content)/appendTo(content) 向当前匹配的所有元素内部的最后插入指定内容

prepend(content)/prependTo(content) 向当前匹配的所有元素内部的最前面插入指定内容

before(content)/(content)insertBefore(JQ对象) 将指定内容插入到当前所有匹配元素的前面

after(content)//(content)insertAfter(JQ对象) 将指定内容插入到当前所有匹配元素的后面替换节点

replaceWith(content) 用指定内容替换所有匹配的标签删除节点

删除元素

empty() 删除所有匹配元素的子元素

remove() 删除所有匹配的元素

筛选

根据指定的规则过滤内部的标签

first() 获取第一个元素

last() 获取最后一个元素

eq(index|-index) 获取下标位置元素

not(selector) 除什么之外的元素

children(): 子标签中找 find() : 后代标签中找 parent() : 父标签 parents("标签"):一直查找到指定标签名的祖辈标签 prev() : 获取紧邻匹配元素的前一个标签 next() : 获取紧邻匹配元素的后一个标签 siblings() : 前后所有的兄弟标签

事件

处理事件监听相关

on(eventName, funcion(){}) 通用的绑定事件监听

事件解绑： off(eventName)

效果

实现一些动画效果

淡入淡出: 不断改变元素的透明度来实现的

fadeIn(): 带动画的显示

fadeOut(): 带动画隐藏

fadeToggle(): 带动画切换显示/隐藏

滑动动画

slideDown(): 带动画的展开

slideUp(): 带动画的收缩

slideToggle(): 带动画的切换展开/收缩

显示隐藏， 默认没有动画

show(): 带动画的显示

hide(): 带动画的隐藏

toggle(): 带动画的切换显示/隐藏

 收藏

立即使用

MySQL

 收藏

立即使用

JQuery基础小白

 收藏

立即使用

HTML

joryoung

职业：硕士

去主页





0 条评论

下一页

为你推荐

查看更多

