JavaScript與JQuery框架基礎(chǔ)入門教程
<!DOCTYPE html><html><head><meta charset='utf-8'><title>測(cè)試 js的創(chuàng)建對(duì)象</title><script>//2. 創(chuàng)建對(duì)象方式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)建對(duì)象方式1：//聲明對(duì)象function Person(){}//創(chuàng)建對(duì)象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對(duì)象的各種方法屬性。解析網(wǎng)頁(yè)里的各種元素。
按照id獲取元素-----getElementById(“id屬性的值”)
按照name獲取元素-----getElementsByName(“name屬性的值”)
按照class獲取元素-----getElementsByClassName(“class屬性的值”)
按照標(biāo)簽名獲取元素-----getElementsByTagName(“標(biāo)簽名”)
在瀏覽器輸出-----write(“要展示的內(nèi)容”)
innerHtml
innerText
style
?2，測(cè)試<!DOCTYPE html><html><head><meta charset='utf-8'><title>測(cè)試 DOM解析網(wǎng)頁(yè)元素</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)頁(yè)寫出數(shù)據(jù)// //innerText和innerHtml的區(qū)別？innerHtml能解析HTML標(biāo)簽// a.innerHtml = '<h1>hello</h1>' ; //修改內(nèi)容// document.write( a.innerHtml ); //直接向網(wǎng)頁(yè)寫出數(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.piao2010.com/bcjs/16348.html#' id='a1'>我是a1</a><a href='http://www.piao2010.com/bcjs/16348.html#' class='f'>我是a2</a><p class='f'>我是p1</p><p>我是p2</p></body></html>三，Jquery?1，概述
用來(lái)簡(jiǎn)化JS的寫法，綜合使用了HTML css js。
語(yǔ)法： $(選擇器).事件
?2，使用步驟先引入jQuery的文件： 在HTML里使用script標(biāo)簽引入
使用jQuery的語(yǔ)法修飾網(wǎng)頁(yè)的元素
?3，入門案例<!DOCTYPE html><html><head><meta charset='utf-8'><title>測(cè)試 jq語(yǔ)法</title><!-- 1. 引入jQuery文件 --><script src='http://www.piao2010.com/bcjs/jquery-1.8.3.min.js'></script><!-- 2. 在網(wǎng)頁(yè)中嵌入JS代碼 --><script>// 點(diǎn)擊p標(biāo)簽，修改文字function fun(){//dom獲取元素var a = document.getElementsByTagName('p');//按照標(biāo)簽名獲取元素a[0].innerHTML='我變了。。。';//修改文字//jq獲取元素 -- jq語(yǔ)法： $(選擇器).事件$('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>測(cè)試 jq的文檔就緒</title><!-- 1. 導(dǎo)入jq文件 --><script src='http://www.piao2010.com/bcjs/jquery-1.8.3.min.js'></script><script>//寫法1的問(wèn)題：想用的h1還沒(méi)被加載，用時(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的語(yǔ)法?1，選擇器
標(biāo)簽名選擇器： $(“div”) ? 選中div
id選擇器： $('#d1') ? 選中id=d1的元素
class選擇器： $('.cls') ? 選中class=cls的元素
屬性選擇器： $('[href]') ? 選中有href屬性的元素
高級(jí)選擇器： $(“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>測(cè)試 jq的練習(xí)</title><!-- 1. 引入jq --><script src='http://www.piao2010.com/bcjs/jquery-1.8.3.min.js'></script><!-- 2. 使用jq語(yǔ)法做練習(xí) 語(yǔ)法：$(選擇器).事件 --><script>// jq文檔就緒函數(shù)：：保證元素都被加載過(guò)了，就可以放心使用了，不然會(huì)報(bào)錯(cuò)$(function(){// 練習(xí)1：?jiǎn)螕鬷d=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.piao2010.com/bcjs/16348.html#'>我是a2</a><a href='http://www.piao2010.com/bcjs/16348.html#'>我是a3</a></body></html>總結(jié)
本篇文章就到這里了，希望能給你帶來(lái)幫助，也希望您能夠多多關(guān)注好吧啦網(wǎng)的更多內(nèi)容！
相關(guān)文章：
1. idea開(kāi)啟代碼提示功能的方法步驟2. idea自定義快捷鍵的方法步驟3. 詳解CSS樣式中的!important、*、_符號(hào)4. vue 清空input標(biāo)簽 中file的值操作5. 淺談django不使用restframework自定義接口與使用的區(qū)別6. XML經(jīng)典問(wèn)答7. 用PHP的Socket實(shí)現(xiàn)HTTP請(qǐng)求8. ASP開(kāi)發(fā)準(zhǔn)則是什么9. js中.sort()函數(shù)的常見(jiàn)用法與高級(jí)操作10. .NET使用YARP根據(jù)域名轉(zhuǎn)發(fā)實(shí)現(xiàn)反向代理
網(wǎng)公網(wǎng)安備