jquery-入门-基本使用-选择器-转移

最新推荐文章于 2023-07-30 09:00:30 发布

原创最新推荐文章于 2023-07-30 09:00:30 发布 · 354 阅读

CC 4.0 BY-SA版权

本文介绍了jQuery相关知识，jQuery是JavaScript的库。讲解了其导入方式，预加载写法，获取对象的命名规范，还介绍了选择器的过滤、转移等操作，以及如何使用jQuery获取对象并添加CSS样式，对比了jQuery与JavaScript，同时提及了易出的错误。

小结

如何从当前目录下导入jquery.js文件
<script type="text/javascript" src="jquery.js">
主要通过script标签来导入一个js文件即可
注意，导入js文件的这个script标签，里面不要写代码


javascript，期望等待加载了页面后再执行，请写出格式
window.onload = 匿名函数


等待页面加载后再执行，请写出格式
$(匿名函数)
补充一个完整的版本
$(document).ready(匿名函数)
小结：
$()相当于$(document).ready()
我们只需要把匿名函数写在（）中就可以

如何选择一个或一组标签，写出格式
$（css选择器）

选出id为myid的标签对象
$("#myid")

选出类名为myclass的标签组对象
$(".myclass")

选出input标签中name属性值为username的标签对象
$("input[name=username]")


选择器的过滤，包含，选择div标签中包含'标签的元素
$("div").has("p")

选择器的过滤，不包含，选择div标签中不包含类名为myclass的元素
$("div").not(".myclass")

选择器的过滤，过滤，在div标签中选择类名为myclass的元素
$("div").filter(".myclass")


选择器的过滤，按索引取值，在div标签中选择第六个元素
$("div").eq(5)
备注，JS标签组如果要按照索引来取值，默认是以0为起始索引

给对象添加css样式的写法,字典形式的写法格式
jquery对象.css（{属性1:值1，属性2：值2}）
备注，属性与值使用字符串的方式来表达
$Div.css({
    "color":"red",
    "font-size":"50px",
    "background-color":"blue"
});

给对象添加css样式的写法,非字典的形式，写法格式
对象.css（样式的属性，样式的值）
$Div.css("color","blue");



获取一个对象的样式的属性值，格式
对象.css（属性）

获取$Div标签对象的font-size样式的值
$Div.css("font-size")

选择器的转移，找到对象前面的一个标签
对象.prev()


选择器的转移，找到对象前面所有的
对象.prevAll()

选择器的转移，找到对象后面的一个
对象.next()

选择器的转移，找到对象后面的所有的
对象.nextAll()

选择器的转移，找到对象的父元素
对象.parent()

选择器的转移，找到对象的所有子元素
对象.children()


选择器的转移，找到对象兄弟元素，同级元素
对象.siblings()


选择器的过滤，找到对象中类名包含myclass的元素
对象.find(".myclass")


如何判断拿到的对象是否有元素
对象.length
通过对选取对象的长度进行测量
如果长度的结果是0，表示没有选到对象
否则，值为几，就表示选中了几个标签对象

添加样式，给对象添加一个类名为red的样式，写法
对象.addClass("red")

添加样式，给对象添加类名为red以及类名为f50的样式，写法
对象.addClass("red f50")

移除样式，将对象的red样式移除
对象.removeClass("red")

移除样式，将对象的red和f50样式移除
对象.removeClass("red f50")

解释型语言

python 与 javascript 都是解释型语言

jquery是 javascript的库

导入

使用js的文件导入方式

把jquery文件导入到html页面

预加载的写法

第一步

$符号加上括号（）
在这里插入图片描述

第二步

括号内写一个匿名函数

在这里插入图片描述

第三步

主体的代码，写在匿名函数里面

格式

在这里插入图片描述

获取对象

命名

如果通过jquery方法得到的对象，变量命名的时候，前面加上一个$符号

如果是通过原生的javascript方式获得的对象，命名时不要加$符号

命名规范，方便其他程序员快速了解变量的性质

标签的选取

在这里插入图片描述

jquery的标签选取格式

jquery标签对象 = $（CSS选择器）

最终得到的标签对象，可以是一个标签
也可以是一组标签

对选择集进行过滤

在这里插入图片描述

英语

has，有
not，没有
filter，过滤
eq，equal，等于

在这里插入图片描述

过滤的格式

方法有以下的

has
not
filter
eq

格式

$（css选择器）.方法（css选择器）
它相关于是
jquery对象.方法（css选择器)
它的本质
对象.方法（参数）

在这里插入图片描述

选择器的转移

单词

prev，有之前，提前的意思
prevAll，前面所有的

。。。备课笔记。。。

jquery介绍

在这里插入图片描述

官网
jQuery
http://jquery.com/

在这里插入图片描述

下载
Download jQuery | jQuery
http://jquery.com/download/

在这里插入图片描述

下载全jquery版本
jquery下载所有版本（实时更新）
http://www.jq22.com/jquery-info122

jquery的导入

    <script type="text/javascript" src="jquery-3.4.1.js"></script>

src属性的值，修改为js的文件就好

在这里插入图片描述
由于不用看源码
可以直接导入压缩版的JQUERY的库就好

在这里插入图片描述

体验使用

jquery vs javascript

获取一个标签对象然后弹出
在这里插入图片描述
线上的是javascript
线下的是jquery

在这里插入图片描述

易出的错误

不要在引处文件的script中写代码
在这里插入图片描述

选择器

在这里插入图片描述

jquery的准备简写

在这里插入图片描述

获取对象添加CSS样式

命名

如果获取的是一个对象
用$作为名字头
$o 与 o，作为变量名的区别
1，
2，

获取对象

var $变量名 = $(css选择器);

不论此时获取的对象是单个的还是一组的
都无所谓

给对象添加CSS样式

jquery对象.css（{属性1，值1}）

补充
关于属性名，不论按css的属性来写
还是按照js操作css的属性来写
都可以实现效果
在这里插入图片描述

如果样式有多个属性设置
元组包多个字典，字典中多个键值对来实现

在这里插入图片描述

选择器的过滤

如果一个标签要多次使用
就用一个变量接收
否则
直接获取直接给样式
在这里插入图片描述

在这里插入图片描述

包含某某标签

在这里插入图片描述

选择器的转移

在这里插入图片描述

判断选中

在这里插入图片描述

jquery选择器

在这里插入图片描述

css函数
只有一个参数时，就是读值
有两个参数时，就是赋值

同理类比python中
a
与
a=3
的区别

读数据
在这里插入图片描述

原生VSJQUERY 读取未定位的属性
在这里插入图片描述

在这里插入图片描述

给标签对象写入样式

标签对象.css（属性1，值1）
或者
标签对象.css（{属性1：值1， 属性2：值2}）

在这里插入图片描述

样式名操作

在这里插入图片描述

addClass
效果相当于给标签新添加一个
在这里插入图片描述

removeClass
在这里插入图片描述

在这里插入图片描述