列举五种常用的网站推广方法,网页在线生成,凡科是免费做网站吗,学院网站整改及建设情况报告文章目录1. 引入 jQuery2. 基本语法3. jQuery 选择器3.1 元素选择器3.2 #id 选择器3.3 .class 选择器4. jQuery事件5. 获取内容和属性5.1 获取内容5.2 获取属性learning from 《python web开发从入门到精通》
jQuery 是一个轻量级的 JavaScript 函数库包含 元素选取#xff0…
文章目录1. 引入 jQuery2. 基本语法3. jQuery 选择器3.1 元素选择器3.2 #id 选择器3.3 .class 选择器4. jQuery事件5. 获取内容和属性5.1 获取内容5.2 获取属性learning from 《python web开发从入门到精通》
jQuery 是一个轻量级的 JavaScript 函数库包含 元素选取操作事件函数特效动画等功能
1. 引入 jQuery
下载 https://jquery.com/download/ 在 head 中使用 script 外部引用即可使用 CDN 链接引用 如 script srchttps://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js/script script srchttps://cdn.staticfile.org/jquery/3.6.0/jquery.js/script
2. 基本语法
$(selector).action() $ 定义 jQueryselector 指明HTML元素action 执行的操作
例子
$(this).hide() 隐藏当前元素$(p).hide() 隐藏所有 p 元素$(p.test).hide() 隐藏所有 class test 的 p 元素$(#test).hide() 隐藏 id test 的元素
大多数情况下 jQuery 函数位于 document ready 函数中防止没有加载完成就对不存在的元素进行操作
$(document).ready(function(){// jQuery 代码
});document ready 函数 也可简写
$(function(){// jQuery 代码
});3. jQuery 选择器
基于元素的 id 类类型属性属性值等进行查找选择 HTML 元素所有选择器 都以 $() 开始
3.1 元素选择器
基于元素名 选取如 $(p) 选择所有 p 元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title元素选择器/titlescript srchttps://cdn.staticfile.org/jquery/3.6.0/jquery.js/script/head
bodypmichael 学习web开发/p
p继续加油/p
button点击按钮隐藏所有 p 元素/button
script$(document).ready(function () {$(button).click(function () {$(p).hide();});});
/script/body
/html3.2 #id 选择器
其通过 id 属性id 是唯一的选取指定的一个元素如 $(#test)
pmichael 学习web开发/p
p继续加油/p
p idmyweb我的博客地址 https://michael.blog.csdn.net//p
button idb1点击按钮隐藏 idmyweb 的元素/button
script$(document).ready(function () {$(button).click(function () {$(#myweb).hide();});});
/script3.3 .class 选择器
它通过 指定的 class 查找元素如$(.test)
点击按钮所有带有 class“test” 属性的元素都被隐藏
script$(document).ready(function () {$(button).click(function () {$(.test).hide();[添加链接描述](https://www.runoob.com/jsref/dom-obj-event.html) });});
/script更多选择器参考https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
4. jQuery事件
页面对访问者的响应叫做事件
常见事件参看链接
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejQuery事件/titlescript srchttps://cdn.staticfile.org/jquery/3.6.0/jquery.js/script/head
bodyp idp1michael 学习web开发/p
script$(document).ready(function(){$(#p1).hover(function(){$(this).css(color,red);alert(鼠标在我上面悬停);},function(){$(this).css(color,black);alert(鼠标离开元素);})})
/script/body
/html5. 获取内容和属性
5.1 获取内容
操作 DOM 文档
text() 设置或返回元素的文本html() 设置或返回元素的内容(包括 HTML 标记)val() 设置或返回表单字段的值
!DOCTYPE html
html langen
headmeta charsetUTF-8title获取内容/titlescript srchttps://cdn.staticfile.org/jquery/3.6.0/jquery.js/script/head
bodyp id test这是文字中 b加粗/b 的文字/p
button idbt1显示文本text/button
button idbt2显示HTML/buttonscript$(#bt1).click(function () {alert(text:$(#test).text());});$(#bt2).click(function () {alert(html:$(#test).html());});
/script/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8title获取val, 验证字符串长度/titlescript srchttps://cdn.staticfile.org/jquery/3.6.0/jquery.js/script/head
bodyh4请填写用户信息/h4
form methodpost actiondivlabel forusername用户名/labelinput typetext idusername nameusername value/divdivlabel forpassword密nbsp;nbsp;nbsp;码/labelinput typepassword idpassword namepassword value/divdivbutton idbt1 typesubmit namesubmit提交/button/div
/formscript$(#bt1).click(function () {var username $(#username).val();var password $(#password).val();if (username.length 3) {alert(用户名长度不能小于3位);return False;}if (password.length 6) {alert(密码长度不能小于6位);return False;}return True;});
/script/body
/html5.2 获取属性
jQuery 的 attr() 方法可以获取和设置 属性值 如attr(属性名) 获取属性值attr(属性名, ”属性值“) 设置属性值
!DOCTYPE html
html langen
headmeta charsetUTF-8title属性值读取设置/titlescript srchttps://cdn.staticfile.org/jquery/3.6.0/jquery.js/script/head
bodydiva idurl1 hrefhttps://michael.blog.csdn.net/Michael阿明博客地址/a
/div
button idbutton1读取url地址/button
button idbutton2修改url地址/buttonscript$(#button1).click(function () {var url $(#url1).attr(href);alert(url);});$(#button2).click(function () {$(#url1).attr(href, https://www.baidu.com/);$(#url1).html(百度首页地址);});
/script/body
/html
