濰坊網(wǎng)絡營銷外包灰色行業(yè)關(guān)鍵詞優(yōu)化
提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
文章目錄
- 一、JavaScript與jQuery
- 二、JavaScript常用的基本功能
- 1.插入位置
- 2.注釋
- 3.變量
- 4.數(shù)組
- 5.滾動字符
- 三、jQuery常用的基本功能
- 1.引入jQuery
- 2.尋找標簽
- 3.val、text、append的使用舉例
- 4.表格刪除案例
- 5.綁定事件案例
- 6.菜單切換案例
一、JavaScript與jQuery
JavaScript（簡稱JS）是一種廣泛應用的編程語言，主要用于網(wǎng)頁開發(fā)。它是一種多才多藝、動態(tài)性強的語言，允許開發(fā)人員為網(wǎng)頁應用添加交互性、操作文檔對象模型（DOM）并創(chuàng)建豐富的用戶體驗
jQuery是一個流行的JavaScript庫，簡化了客戶端Web開發(fā)。它提供了各種功能和工具，用于與HTML文檔交互、處理事件、發(fā)起AJAX請求和創(chuàng)建動畫。
二、JavaScript常用的基本功能
1.插入位置
在head體中
<script type="text/javascript">//編寫位置1</script>
在body體中
<script type="text/javascript">function myFunc() {//編寫位置2
// alert("你好呀")confirm("是否要繼續(xù)")}
</script>
2.注釋
總快捷鍵：ctrl+/
在不同的文件類型中，注釋也各有不同。
<!--- html --->
/* CSS */
//JS
/* JS */
3.變量
<script type="text/javascript">var name1 ="aa";console.log(name);
// 聲明var name2="中國聯(lián)通";var name3=str("中國聯(lián)通");var v1 =name.length;var v2 =name[0]; //無-1，-2說法 ==name.charAt(3)var v3 =name.trim() //去空白得到新的字符串var v4 =name.substring(1,2)//切片 前取后不取
</script>
4.數(shù)組
<script type="text/javascript">var 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的元素刪除//循環(huán)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.滾動字符
<body><span id="txt">歡迎來CSDN學習</span><script type="text/javascript">function show(){
<!--1.去HTML中找到某個標簽并獲取他的內(nèi)容 DOM-->var tag=document.getElementById("txt");var dataString=tag.innerText;
<!-- 2.動態(tài)起來 把文本中的第一個字符放字符串的最后面-->var firstChar =dataString[0];var otherString =dataString.substring(1,dataString.length);var newText =otherString + firstChar;
<!--3.在HTML中更新內(nèi)容-->tag.innerText =newText;}
<!-- 定時器，每一秒執(zhí)行一次show函數(shù)-->setInterval(show,1000);</script>
</body>
三、jQuery常用的基本功能
1.引入jQuery
法一：官網(wǎng)提供了CDN 的支持，直接使用官網(wǎng) 提供的鏈接即可。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
法二：去官網(wǎng)下載jQuery的js文件和Bootstrap的壓縮包。
在根目錄下創(chuàng)建static目錄，并在static目錄下分別創(chuàng)建js\css\plugins\img目錄。
將jQuery的js文件放到js目錄下，將壓縮包里面的文件放到plugins目錄下。如下圖：
<script src="static/js/jquery-3.7.0.min.js"></script>
<script src="static/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”]”)
間接尋找標簽
兄弟關(guān)系中
找到上一個 ： $(“#txt”).prev()
找到下一個 ： $(“#txt”).next()
找到下下一個 ： $(“#txt”).next().next()
所有兄弟 ： $(“#txt”).siblings()
父子關(guān)系中
$(“#txt”).parent()
$(“#txt”).children()
$(“#txt”).children(“.p10”) //兒子中找尋class=p10
3.val、text、append的使用舉例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="txtUser" placeholder="用戶名">
<input type="text" id="txtEmail" placeholder="郵箱">
<input type="button" value="提交" onclick="getInfo()"/>
<ul id="view">
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>function getInfo(){//1.獲取var username = $("#txtUser").val();var email = $("#txtEmail").val();var dataString =username +"-" +email;// 2.創(chuàng)建且寫入var newli = $("<li>").text(dataString);//3.把創(chuàng)建的li標簽添加到ul里面$("#view").append(newli);}
</script>
</body>
</html>
4.表格刪除案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1"><thead><tr><th>ID</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>aa</td><td><input type="button" value="刪除" class="delete"/></td></tr><tr><td>2</td><td>bb</td><td><input type="button" value="刪除" class="delete"/></td></tr><tr><td>3</td><td>cc</td><td><input type="button" value="刪除" class="delete"/></td></tr></tbody></table><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>$(function () {//找到所有class=delete 的標簽 綁定事件$(".delete").click(function () {($(this)).parent().parent().remove();});})</script>
</body>
</html>
5.綁定事件案例
以remove為例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul><li>百度</li><li>谷歌</li><li>搜狐</li><li>必應</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>$(function(){$("li").click(function () {var text = $(this).text();var text = $(this).remove();//鼠標點擊后去除})}) //當頁面框架加載完成，自動執(zhí)行
</script></body>
</html>
6.菜單切換案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.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>
<body><div class="menus"><div class="item"><div class="header" onclick="clickMe(this);">南</div><div class="content hide"><a >湖南</a><a >云南</a><a >河南</a><a >西南</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北</div><div class="content hide"><a >湖北</a><a >云北</a><a >河北</a><a >西北</a></div></div></div><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>function clickMe(self) {//展示自己下面的功能$(self).next().removeClass("hide");//找父親，父親的所有兄弟，再去每個兄弟的子孫中尋找class=content 添加hide樣式$(self).parent().siblings().find(".content").addClass("hide");if(hasHide){$(self).next().removeClass("hide");}else{$(self).next().addClass("hide");}}</script>
</body>
</html>