JavaScript與JQuery框架基礎(chǔ)入門教程
<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 js的創(chuàng)建對象</title><script>//2. 創(chuàng)建對象方式2：var p2 = {//綁定了屬性name:'張三',age:19,//綁定了函數(shù)eat:function(a){console.log(a);}}console.log(p2);p2.eat(10);//調(diào)用函數(shù)//1. 創(chuàng)建對象方式1：//聲明對象function Person(){}//創(chuàng)建對象var p = new Person();//動(dòng)態(tài)綁定屬性p.name='張三' ;p.age=18 ;//動(dòng)態(tài)綁定函數(shù)p.eat=function(){console.log('吃豬肉');}//查看console.log(p);//調(diào)用函數(shù)p.eat();</script></head><body></body></html>二，DOM?1，作用
使用document對象的各種方法屬性。解析網(wǎng)頁里的各種元素。
按照id獲取元素-----getElementById(“id屬性的值”)
按照name獲取元素-----getElementsByName(“name屬性的值”)
按照class獲取元素-----getElementsByClassName(“class屬性的值”)
按照標(biāo)簽名獲取元素-----getElementsByTagName(“標(biāo)簽名”)
在瀏覽器輸出-----write(“要展示的內(nèi)容”)
innerHtml
innerText
style
?2，測試<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 DOM解析網(wǎng)頁元素</title><script>function method(){// 4. 獲取標(biāo)簽名是p的var d = document.getElementsByTagName('p');d[0].innerHTML='hi...';console.log(d[0].innerHTML);// 3. 獲取 class='f'var c = document.getElementsByClassName('f');c[0].innerHTML='hi...';console.log(c[0].innerHTML);// 2. 獲取name='d'var b = document.getElementsByName('d');//得到多個(gè)元素// b[0].innerHTML='test...'; //修改第一個(gè)元素的內(nèi)容b[0].style.color='blue'; //修改第一個(gè)元素的字的顏色console.log(b[0].innerHTML);//獲取第一個(gè)元素的內(nèi)容// 1. 獲取id='a1'var a = window.document.getElementById('a1');//得到一個(gè)元素// a.innerText = '<h1>hello</h1>' ; //修改內(nèi)容// document.write( a.innerText ); //直接向網(wǎng)頁寫出數(shù)據(jù)// //innerText和innerHtml的區(qū)別？innerHtml能解析HTML標(biāo)簽// a.innerHtml = '<h1>hello</h1>' ; //修改內(nèi)容// document.write( a.innerHtml ); //直接向網(wǎng)頁寫出數(shù)據(jù)}</script></head><body><div name='d' onclick='method();'>我是div1</div><div name='d'>我是div2</div><div class='f'>我是div3</div><a href='http://www.gepszalag.com/bcjs/16348.html#' id='a1'>我是a1</a><a href='http://www.gepszalag.com/bcjs/16348.html#' class='f'>我是a2</a><p class='f'>我是p1</p><p>我是p2</p></body></html>三，Jquery?1，概述
用來簡化JS的寫法，綜合使用了HTML css js。
語法： $(選擇器).事件
?2，使用步驟先引入jQuery的文件： 在HTML里使用script標(biāo)簽引入
使用jQuery的語法修飾網(wǎng)頁的元素
?3，入門案例<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 jq語法</title><!-- 1. 引入jQuery文件 --><script src='http://www.gepszalag.com/bcjs/jquery-1.8.3.min.js'></script><!-- 2. 在網(wǎng)頁中嵌入JS代碼 --><script>// 點(diǎn)擊p標(biāo)簽，修改文字function fun(){//dom獲取元素var a = document.getElementsByTagName('p');//按照標(biāo)簽名獲取元素a[0].innerHTML='我變了。。。';//修改文字//jq獲取元素 -- jq語法： $(選擇器).事件$('p').hide();//隱藏元素$('p').text('我變了33333。。。');//修改文字}</script></head><body><p onclick='fun();'>你是p2</p></body></html>?4，jQuery的文檔就緒
<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 jq的文檔就緒</title><!-- 1. 導(dǎo)入jq文件 --><script src='http://www.gepszalag.com/bcjs/jquery-1.8.3.min.js'></script><script>//寫法1的問題：想用的h1還沒被加載，用時(shí)會(huì)報(bào)錯(cuò)// 解決方案：寫在h1加載之后 + 使用文檔就緒函數(shù)(先導(dǎo)入jq)// document.getElementsByTagName('h1')[0].innerHTML='我變了。。';//寫法2的：使用文檔就緒函數(shù)(先導(dǎo)入jq)--是指文檔都就緒了再用元素$(document).ready(function(){//document.getElementsByTagName('h1')[0].innerHTML='我變了。。';//js的dom寫法$('h1').text('我變了。。');//jq的寫法});</script></head><body><h1>我是h1</h1></body></html>四，JQuery的語法?1，選擇器
標(biāo)簽名選擇器： $(“div”) ? 選中div
id選擇器： $('#d1') ? 選中id=d1的元素
class選擇器： $('.cls') ? 選中class=cls的元素
屬性選擇器： $('[href]') ? 選中有href屬性的元素
高級選擇器： $(“div.d3”) ? 選中class=d3的div
?2,常用函數(shù)text() html() val() — 獲取或者設(shè)置值
hide() ? 隱藏
$(“p”).css(“background-color”,“yellow”); --設(shè)置樣式
show()—顯示
fadeIn() — 淡入
fadeOut() — 淡出
?3,常用事件單擊事件?click !!!
雙擊事件?dblclick
鼠標(biāo)移入事件?mouseenter
鼠標(biāo)移出事件?mousleave
鼠標(biāo)懸停事件?hover
鍵盤事件?keydown keyup keypress
?4,練習(xí)<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 jq的練習(xí)</title><!-- 1. 引入jq --><script src='http://www.gepszalag.com/bcjs/jquery-1.8.3.min.js'></script><!-- 2. 使用jq語法做練習(xí) 語法：$(選擇器).事件 --><script>// jq文檔就緒函數(shù)：：保證元素都被加載過了，就可以放心使用了，不然會(huì)報(bào)錯(cuò)$(function(){// 練習(xí)1：單擊id=d1的元素，隱藏id=p1的$('#d1').click(function(){$('#p1').hide();})});$(function(){// 練習(xí)2：雙擊class='dd'的元素，給div加背景色$('.dd').dblclick(function(){$('div').css('background-color','green');})// 練習(xí)3：鼠標(biāo)進(jìn)入 id='d1'的div，隱藏有href屬性的元素$('#d1').mouseenter(function(){$('[href]').hide();})});</script></head><body><div id='d1'>我是div1</div><div class='dd'>我是div2</div><div>我是div3</div><div class='dd'>我是div4</div><p id='p1'>我是p1</p><p>我是p2</p><a class='dd'>我是a1</a><a href='http://www.gepszalag.com/bcjs/16348.html#'>我是a2</a><a href='http://www.gepszalag.com/bcjs/16348.html#'>我是a3</a></body></html>總結(jié)
本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關(guān)注好吧啦網(wǎng)的更多內(nèi)容！
相關(guān)文章：
1. Ajax對xml信息的接收和處理操作實(shí)例分析2. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐3. Ajax返回值類型與用法實(shí)例分析4. XML入門精解之結(jié)構(gòu)與語法5. 如何使用CSS3畫出一個(gè)叮當(dāng)貓6. ajax處理php返回json數(shù)據(jù)例子7. Java 如何解析key為動(dòng)態(tài)的json操作8. 在python下實(shí)現(xiàn)word2vec詞向量訓(xùn)練與加載實(shí)例9. ASP如何檢測某文件夾是否存在,不存在則自動(dòng)創(chuàng)建10. ASP.NET Core 5.0中的Host.CreateDefaultBuilder執(zhí)行過程解析
網(wǎng)公網(wǎng)安備