Java学习笔记day42-创新互联
JQuery基础
简介
示例
标题名称:Java学习笔记day42-创新互联
分享网址:http://scyanting.com/article/dioijs.html
一个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: 寻找标签语法: $("选择器")
示例:Title span标签
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://scyanting.com/article/dioijs.html