做非物质文化遗产网站的风险,wordpress 首页显示全文,七台河网站seo,网易企业邮箱域名文章目录 前言一、安装与快速上手二、直接寻找标签1.ID选择器2.类选择器/样式选择器3.标签选择器4.层级选择器5.多选择器6.属性选择器 三、间接寻找标签1.找兄弟2.找父子 四、值操作五、事件六、样式操作 前言 jQuery是一个快速、简洁的JavaScript框架#xff0c;是继Prototyp… 文章目录 前言一、安装与快速上手二、直接寻找标签1.ID选择器2.类选择器/样式选择器3.标签选择器4.层级选择器5.多选择器6.属性选择器 三、间接寻找标签1.找兄弟2.找父子 四、值操作五、事件六、样式操作 前言 jQuery是一个快速、简洁的JavaScript框架是继Prototype之后又一个优秀的JavaScript代码库框架。它封装JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档操作、事件处理、动画设计和Ajax交互 一、安装与快速上手
JQuery是一个JavaScript的第三方模块(第三方类库)JQuery的安装方式参考《BootScrap详细教程》的实现动态效果部分
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyh1 idtxt中国联通/h1script srcstatic/js/jquery-3.6.1.min.js/scriptscript typetext/javascript//使用JQuery修改内容$(#txt).text(广西移动);/script/body
/html二、直接寻找标签
1.ID选择器
h1 idtxt中国联通/h1
h1中国联通/h1
h1中国联通/h1$(#txt)2.类选择器/样式选择器
h1 classc1中国联通/h1
h1 classc2中国联通/h1
h1 classc3中国联通/h1$(.c1)3.标签选择器
h1 classc1中国联通/h1
h1 classc2中国联通/h1
h1 classc3中国联通/h1$(h1)4.层级选择器
div classc1div classc2h1123/h1/div
/div$(.c1 .c2 h1)5.多选择器
div classc1div classc2h1123/h1/div
/div
div classc3div classc4h1123/h1li456/li/div
/div$(#c1,#c2,li)6.属性选择器
input typetext namen1 /
input typetext namen2 /
input typetext namen3 /$(input[namen1])三、间接寻找标签
1.找兄弟
divdiv北京/divdiv idc1上海/divdiv深圳/divdiv广州/div
/div$(#c1).prev() //上一个
$(#c1) //本体
$(#c1).next() //下一个
$(#c1).next().next() //下一个的下一个
$(#c1).siblings() //所有的2.找父子
divdivdiv北京/divdiv idc1div浦东新区/divdiv静安区/divdiv奉贤区/div/divdiv深圳/divdiv广州/div/divdivdiv北京/divdiv idc1上海/divdiv深圳/divdiv广州/div/div
/div$(#c1).parent() //父亲
$(#c1).parent().parent() //父亲的父亲$(#c1).children() //所有的儿子
$(#c1).children(.p10) //所有的儿子中寻找classp10$(#c1).find(.p10) //所有的子孙中寻找classp10
$(#c1).children(div) //所有的儿子中寻找标签 div实例菜单切换
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.menus {width: 200px;height: 1000px;border: 1px solid red;}.menus .header {background-color: royalblue;padding: 5px 5px;border-bottom: 1px dotted gray;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted gray;}.hide {display: none;}/style
/headbodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);天津/divdiv classcontent hidea静海区/aa东丽区/aa西青区/aa宝坻区/aa滨海新区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/div/divscript srcstatic/js/jquery-3.6.1.min.js/scriptscript typetext/javascriptfunction clickMe(self) {var hasHide $(self).next().hasClass(hide);if (hasHide) {$(self).next().removeClass(hide);} else {$(self).next().addClass(hide);}}/script
/body
/html功能升级只允许一个展开
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.menus {width: 200px;height: 1000px;border: 1px solid red;}.menus .header {background-color: royalblue;padding: 5px 5px;border-bottom: 1px dotted gray;cursor: pointer;}.menus .content a {display: block;padding: 5px 5px;border-bottom: 1px dotted gray;}.hide {display: none;}/style
/headbodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);天津/divdiv classcontenta静海区/aa东丽区/aa西青区/aa宝坻区/aa滨海新区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海1/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/divdiv classitemdiv classheader onclickclickMe(this);上海2/divdiv classcontent hidea静安区/aa奉贤区/aa浦东新区/aa徐汇区/aa青浦区/a/div/div/divscript srcstatic/js/jquery-3.6.1.min.js/scriptscript typetext/javascriptfunction clickMe(self) {//1.让菜单展示出来$(self).next().removeClass(hide);//2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 classcontent, 添加 hide 样式$(self).parent().siblings().find(.content).addClass(hide);}/script
/body
/html四、值操作
div idc1内容/div
input typetext idc2/JQuery操作:
$(#c1).text() //获取文本内容
$(#c1).text(abc) //设置文本内容$(#c2).val() //获取用户输入的值
$(#c2).val(嘿嘿嘿) //设置值实例动态创建数据
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodyinput typetext idtxtUser placeholder用户名input typetext idtxtEmail placeholder密码input typebutton value提交 onclickgetInfo()ul idview/ulscript srcstatic/js/jquery-3.6.1.min.js/scriptscriptfunction getInfo() {//1.获取用户输入的用户名与密码var username $(#txtUser).val();var email $(#txtEmail).val();dataString username : email//2.创建li标签, 在li内部写入内容var newLi $(li).text(dataString);//3.把新创建的li标签添加到ul里面$(#view).append(newLi);}/script
/body
/html五、事件
$(“相关标签”).click(function(){函数内容});
bodyulli百度/lili谷歌/lili搜狗/li/ulscript srcstatic/js/jquery-3.6.1.min.js/scriptscript$(li).click(function(){// 点击li标签时,自动执行这和函数// $(this) 当前你点击的是哪个标签$(this).remove();//删除标签});/script
/body实例表格操作
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodytable border1theadtrthID/thth姓名/thth年龄/th/tr/theadtbody idbodytrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/trtrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/trtrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/trtrtd1/tdtdpoker/tdtdinput typebutton value删除 classdelete //td/tr/tbody/tablescript srcstatic/js/jquery-3.6.1.min.js/scriptscript$(function () {$(.delete).click(function () {$(this).parent().parent().remove();});})/script
/body
/html六、样式操作
addClassremoveClasshasClass等等 十分多可以在jQuery手册中寻找https://jquery.cuishifeng.cn/
