比较好网站制作公司,论我国门户网站建设不足,泰安网课,百度指数大数据分享平台提示#xff1a;文章写完后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、appe… 提示文章写完后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、append的使用举例4.表格删除案例5.绑定事件案例6.菜单切换案例 一、JavaScript与jQuery
JavaScript简称JS是一种广泛应用的编程语言主要用于网页开发。它是一种多才多艺、动态性强的语言允许开发人员为网页应用添加交互性、操作文档对象模型DOM并创建丰富的用户体验
jQuery是一个流行的JavaScript库简化了客户端Web开发。它提供了各种功能和工具用于与HTML文档交互、处理事件、发起AJAX请求和创建动画。
二、JavaScript常用的基本功能
1.插入位置
在head体中 script typetext/javascript//编写位置1/script在body体中
script typetext/javascriptfunction myFunc() {//编写位置2
// alert(你好呀)confirm(是否要继续)}
/script2.注释
总快捷键ctrl/ 在不同的文件类型中注释也各有不同。
!--- html ---/* CSS *///JS
/* JS */3.变量
script typetext/javascriptvar name1 aa;console.log(name);
// 声明var name2中国联通;var name3str(中国联通);var v1 name.length;var v2 name[0]; //无-1-2说法 name.charAt(3)var v3 name.trim() //去空白得到新的字符串var v4 name.substring(1,2)//切片 前取后不取
/script4.数组
script typetext/javascriptvar v1 [1,2,3,4];var v2 Array([1,2,3,4]);
!-- 操作--v1[1] []v1.pash (最重要) //尾部追加v1.unshift(最重要) //前面添加v1.splice(1,0,中国)// v1.splice(索引0元素)把“中国”放在第一个索引的位置v1.pop() //尾部删除v1.shift() //头部删除v1.splice(2,1) //splice(索引位置1) 索引为2的元素删除//循环for (var idx in v1){//idx 0/1/2/3/ data v1[idx]}for (var i 0;i v1.length;i){}//存在break,countinue
/script
5.滚动字符
bodyspan idtxt欢迎来CSDN学习/spanscript typetext/javascriptfunction show(){
!--1.去HTML中找到某个标签并获取他的内容 DOM--var tagdocument.getElementById(txt);var dataStringtag.innerText;
!-- 2.动态起来 把文本中的第一个字符放字符串的最后面--var firstChar dataString[0];var otherString dataString.substring(1,dataString.length);var newText otherString firstChar;
!--3.在HTML中更新内容--tag.innerText newText;}
!-- 定时器每一秒执行一次show函数--setInterval(show,1000);/script
/body三、jQuery常用的基本功能
1.引入jQuery
法一官网提供了CDN 的支持直接使用官网 提供的链接即可。
script srchttps://cdn.bootcss.com/jquery/3.3.1/jquery.js/script
script srchttps://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js/script法二去官网下载jQuery的js文件和Bootstrap的压缩包。 在根目录下创建static目录并在static目录下分别创建js\css\plugins\img目录。 将jQuery的js文件放到js目录下将压缩包里面的文件放到plugins目录下。如下图
script srcstatic/js/jquery-3.7.0.min.js/script
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.min.js/script注意BootStrap 依赖JavaScript的类库 jquery须在bootstrap的前方
2.寻找标签
直接寻找标签 Id选择(id”txt”) $(“#txt”) 样式选择class”c1” $(“.c1”) 标签选择器(h1,div) $“h1” 层级选择器 $(“.c1 .c2 a”) 多选择器 $(“#txt#c1,li”) 属性选择器 $(“input[name“n1”]”)
间接寻找标签 兄弟关系中 找到上一个 $(“#txt”).prev() 找到下一个 $(“#txt”).next() 找到下下一个 $(“#txt”).next().next() 所有兄弟 $(“#txt”).siblings() 父子关系中 $(“#txt”).parent() $(“#txt”).children() $(“#txt”).children(“.p10”) //儿子中找寻classp10
3.val、text、append的使用举例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typetext idtxtUser placeholder用户名
input typetext idtxtEmail placeholder邮箱
input typebutton value提交 onclickgetInfo()/
ul idview
/ul
script srchttps://cdn.bootcss.com/jquery/3.3.1/jquery.js/script
script srchttps://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js/script
scriptfunction getInfo(){//1.获取var username $(#txtUser).val();var email $(#txtEmail).val();var dataString username - email;// 2.创建且写入var newli $(li).text(dataString);//3.把创建的li标签添加到ul里面$(#view).append(newli);}
/script
/body
/html4.表格删除案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodytable border1theadtrthID/thth姓名/thth操作/th/tr/theadtbodytrtd1/tdtdaa/tdtdinput typebutton value删除 classdelete//td/trtrtd2/tdtdbb/tdtdinput typebutton value删除 classdelete//td/trtrtd3/tdtdcc/tdtdinput typebutton value删除 classdelete//td/tr/tbody/tablescript srchttps://cdn.bootcss.com/jquery/3.3.1/jquery.js/scriptscript$(function () {//找到所有classdelete 的标签 绑定事件$(.delete).click(function () {($(this)).parent().parent().remove();});})/script
/body
/html5.绑定事件案例
以remove为例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狐/lili必应/li
/ul
script srchttps://cdn.bootcss.com/jquery/3.3.1/jquery.js/script
script$(function(){$(li).click(function () {var text $(this).text();var text $(this).remove();//鼠标点击后去除})}) //当页面框架加载完成自动执行
/script/body
/html6.菜单切换案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.menus{width:200px;height:800px;border:1px solid red;}.menus .header{background:gold;padding:10px 5px;border:1px solid gray;cursor: pointer;}.menus .content a{display: block;padding:5px 5px ;border:1px solid gray;}.hide{display: none;}/style
/head
bodydiv classmenusdiv classitemdiv classheader onclickclickMe(this);南/divdiv classcontent hidea 湖南/aa 云南/aa 河南/aa 西南/a/div/divdiv classitemdiv classheader onclickclickMe(this);北/divdiv classcontent hidea 湖北/aa 云北/aa 河北/aa 西北/a/div/div/divscript srchttps://cdn.bootcss.com/jquery/3.3.1/jquery.js/scriptscriptfunction clickMe(self) {//展示自己下面的功能$(self).next().removeClass(hide);//找父亲父亲的所有兄弟再去每个兄弟的子孙中寻找classcontent 添加hide样式$(self).parent().siblings().find(.content).addClass(hide);if(hasHide){$(self).next().removeClass(hide);}else{$(self).next().addClass(hide);}}/script
/body
/html
