JavaScript與JQuery框架基礎入門教程
<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 js的創建對象</title><script>//2. 創建對象方式2：var p2 = {//綁定了屬性name:'張三',age:19,//綁定了函數eat:function(a){console.log(a);}}console.log(p2);p2.eat(10);//調用函數//1. 創建對象方式1：//聲明對象function Person(){}//創建對象var p = new Person();//動態綁定屬性p.name='張三' ;p.age=18 ;//動態綁定函數p.eat=function(){console.log('吃豬肉');}//查看console.log(p);//調用函數p.eat();</script></head><body></body></html>二，DOM?1，作用
使用document對象的各種方法屬性。解析網頁里的各種元素。
按照id獲取元素-----getElementById(“id屬性的值”)
按照name獲取元素-----getElementsByName(“name屬性的值”)
按照class獲取元素-----getElementsByClassName(“class屬性的值”)
按照標簽名獲取元素-----getElementsByTagName(“標簽名”)
在瀏覽器輸出-----write(“要展示的內容”)
innerHtml
innerText
style
?2，測試<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 DOM解析網頁元素</title><script>function method(){// 4. 獲取標簽名是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');//得到多個元素// b[0].innerHTML='test...'; //修改第一個元素的內容b[0].style.color='blue'; //修改第一個元素的字的顏色console.log(b[0].innerHTML);//獲取第一個元素的內容// 1. 獲取id='a1'var a = window.document.getElementById('a1');//得到一個元素// a.innerText = '<h1>hello</h1>' ; //修改內容// document.write( a.innerText ); //直接向網頁寫出數據// //innerText和innerHtml的區別？innerHtml能解析HTML標簽// a.innerHtml = '<h1>hello</h1>' ; //修改內容// document.write( a.innerHtml ); //直接向網頁寫出數據}</script></head><body><div name='d' onclick='method();'>我是div1</div><div name='d'>我是div2</div><div class='f'>我是div3</div><a href='http://www.aoyou183.cn/bcjs/16348.html#' id='a1'>我是a1</a><a href='http://www.aoyou183.cn/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標簽引入
使用jQuery的語法修飾網頁的元素
?3，入門案例<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 jq語法</title><!-- 1. 引入jQuery文件 --><script src='http://www.aoyou183.cn/bcjs/jquery-1.8.3.min.js'></script><!-- 2. 在網頁中嵌入JS代碼 --><script>// 點擊p標簽，修改文字function fun(){//dom獲取元素var a = document.getElementsByTagName('p');//按照標簽名獲取元素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. 導入jq文件 --><script src='http://www.aoyou183.cn/bcjs/jquery-1.8.3.min.js'></script><script>//寫法1的問題：想用的h1還沒被加載，用時會報錯// 解決方案：寫在h1加載之后 + 使用文檔就緒函數(先導入jq)// document.getElementsByTagName('h1')[0].innerHTML='我變了。。';//寫法2的：使用文檔就緒函數(先導入jq)--是指文檔都就緒了再用元素$(document).ready(function(){//document.getElementsByTagName('h1')[0].innerHTML='我變了。。';//js的dom寫法$('h1').text('我變了。。');//jq的寫法});</script></head><body><h1>我是h1</h1></body></html>四，JQuery的語法?1，選擇器
標簽名選擇器： $(“div”) ? 選中div
id選擇器： $('#d1') ? 選中id=d1的元素
class選擇器： $('.cls') ? 選中class=cls的元素
屬性選擇器： $('[href]') ? 選中有href屬性的元素
高級選擇器： $(“div.d3”) ? 選中class=d3的div
?2,常用函數text() html() val() — 獲取或者設置值
hide() ? 隱藏
$(“p”).css(“background-color”,“yellow”); --設置樣式
show()—顯示
fadeIn() — 淡入
fadeOut() — 淡出
?3,常用事件單擊事件?click !!!
雙擊事件?dblclick
鼠標移入事件?mouseenter
鼠標移出事件?mousleave
鼠標懸停事件?hover
鍵盤事件?keydown keyup keypress
?4,練習<!DOCTYPE html><html><head><meta charset='utf-8'><title>測試 jq的練習</title><!-- 1. 引入jq --><script src='http://www.aoyou183.cn/bcjs/jquery-1.8.3.min.js'></script><!-- 2. 使用jq語法做練習 語法：$(選擇器).事件 --><script>// jq文檔就緒函數：：保證元素都被加載過了，就可以放心使用了，不然會報錯$(function(){// 練習1：單擊id=d1的元素，隱藏id=p1的$('#d1').click(function(){$('#p1').hide();})});$(function(){// 練習2：雙擊class='dd'的元素，給div加背景色$('.dd').dblclick(function(){$('div').css('background-color','green');})// 練習3：鼠標進入 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.aoyou183.cn/bcjs/16348.html#'>我是a2</a><a href='http://www.aoyou183.cn/bcjs/16348.html#'>我是a3</a></body></html>總結
本篇文章就到這里了，希望能給你帶來幫助，也希望您能夠多多關注好吧啦網的更多內容！
相關文章：
網公網安備