Java学习笔记day42-创新互联

JQuery基础简介

一个JavaScript的框架，简化了JS的语法和操作，定义了HTML属性操作、样式操作、DOM操作等相关函数，实现了对ajax异步请求封装。提供了很多预定义函数的JS文件。

作用

简化部分JavaScript开发

使用步骤

1.引入JQuery
2.编写代码

引入JQuery 方式1: 引入本地JQuery文件

1.下载JQuery文件
    地址1:http://code.jquery.com/jquery-3.6.0.js
    地址2:http://code.jquery.com/jquery-3.6.0.min.js
2.将JQuery文件存放在js文件夹下
3.在使用JQuery文件的html中使用script标签进行引入

方式2: 通过script标签直接引入JQuery的网络地址

核心函数

jQuery()函数,选择器函数,用于获取HTML文档中的元素,简写为$()

作用1: 寻找标签

语法: $("选择器")
示例:Titlespan标签
p标签1
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了盂县免费建站欢迎大家使用！p标签2

作用2: 创建标签

语法: $("标签")
示例:p标签

作用3: 入口函数

作用: 类似于window.onload = function(){}; 当页面加载完成后执行
语法1: $(document).ready(function(){});
语法2: $(function(){});
示例:   p标签

作用4: 将DOM对象转换为JQuery对象

语法: $(DOM对象)
示例:   p标签
注意: JQuery无法使用DOM对象提供的属性与方法

选择器基本选择器

id选择器: #id
class选择器: .class
标签选择器: 标签名
通配选择器: *

伪类选择器

鼠标悬浮
获取焦点
...

复合选择器

selector1 selector2: 后代选择器,选择所有selector1匹配的元素里面的匹配selector2的元素
selector1 >selector2: 子元素选择器,选择匹配selector1元素的子标签中匹配selector2的元素
selector1,selector2: 选择所有匹配selector1和selector2的元素(并集)
selector1 + selector2: 匹配所有紧接在selector1元素后的selector2元素
selector1 ~ selector2: 匹配所有在selector1元素后的selector2元素

示例:p1
p2
p3
p4
p1
p2
p3
p4
div外的p标签

属性选择器

语法: 
    选择器[属性名]
    选择器[属性名=属性值]
示例:

JQuery选择器筛选语法

选择器筛选语法	说明
$("selector: first ")	匹配selector选择的元素集合中的第一个
$("selector: last ")	匹配selector选择的元素集合中的最后一个
$("selector: odd ")	匹配selector选择的元素集合中索引为奇数的元素(1,3,5,7,…)
$("selector: even ")	匹配selector选择的元素集合中索引为偶数的元素(0,2,4,6,…)
$("selector: eq(index) ")	匹配selector选择的元素集合中索引为index的元素
$("selector: lt(index) ")	匹配selector选择的元素集合中索引小于index的元素
$("selector: gt(index) ")	匹配selector选择的元素集合中索引大于index的元素
$("selector [attrName=attrValue] ")	匹配selector选择的元素集合中attrName属性值为attrValue的元素
$("selector [attrName!=attrValue] ")	匹配selector选择的元素集合中attrName属性值不为attrValue的元素

示例

   p1
p2
p3
p4
p1
p2
p3
p4
div外的p标签

JQuery操作内容

获取内容
    语法1: $("选择器").text()
    语法2: $("选择器").html()
修改内容
    语法1: $("选择器").text(修改后的内容)
    语法2: $("选择器").html(修改后的内容)
    注意: 会替换标签中原内容

示例:   p标签

JQuery操作属性

一般属性
语法: attr()
示例: 
//1.获取元素属性值
var v1 = $("#img").attr("src");
var v2 = $("#img").attr("width");
//2.设置元素属性
$("#img").attr("src","imgs/img01.png");
$("#img").attr("width","200px");

value属性
语法: val()
示例: 
//1.获取元素value属性值
var v = $("#userName").val();
//2.设置元素的value属性值
$("#userName").val("这是设置的值");

获取单选按钮选中的值   
1.选择您的性别?
男
女
获取多选按钮选中的值   
1.选择您的爱好?
篮球
足球
删除属性
语法: removeAttr(属性名)
示例: 
$("#input").removeAttr("value");
$("#input").removeAttr("name")

class属性
语法: 
addClass(): 添加
removeClass(): 删除
toggleClass(): 原标签没有就是添加,原标签有就是删除
attr("class"): 获取class的属性值
示例:   测试

JQuery操作样式

获取css属性值
语法: css("属性名")
注意: 不限于内联样式的属性

修改css属性值
语法: css("属性名","属性值");
注意: 不限于内联样式的属性

示例:

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

新闻名称：Java学习笔记day42-创新互联
文章链接：http://dzwzjz.com/article/dioijs.html

大橙子网站建设，新征程启航

Java学习笔记day42-创新互联

其他资讯