當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js专题

發(fā)布時間：2025/3/20 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 js专题小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Javascript學(xué)習(xí)專題

第一天

Js的語法模式：

<html>

<body>

<scripttype="text/javascript">

<!--

//注釋格式或使用

document.write(“PHP100");

多行注釋

//-->

</script>
<script type=“text/javascript“ src=“a.js”>

</script>

</body>

相關(guān)解釋：

引入方式：第一種是嵌套引入；<script type="text/javascript">。。。。。</script>

?????????????????? ?第二種是文件引入：<script type=“text/javascript“ src=“a.js”>

寫法特點：

每句語法結(jié)束使用分號；類似PHP

黃色部分語法說明檔瀏覽器不支持JS時將

不被執(zhí)行、其他時候不受影響

語法特點：

定義變量的格式:var 變量[=值]

???????? 例證：? var? a;

?var? b , c ;

?var? d = 3;

?var? e = d;

備注：連接符使用+? 例如 var a=”2”+”3”那么a的值是23

常用的提示框：

alert( n);警告框無返回值

confirm(n);確認(rèn)框（選擇）返回布爾值

prompt(n,v);會話框（需要輸入字符）返回字符串

第二天

Html與js的交互事件

常用事件：

onClick????????????? 點擊事件

onChange??????? 改變內(nèi)容事件

onBlur?????????????? 失去焦點

onFocus? 獲得焦點

onSubmit???????? 點擊submit按鈕

onMouseOver???????? 獲得鼠標(biāo)

onMouseOut 離開鼠標(biāo)

Onload???????????? 自動載入

第三天

獲得表單里面的各類屬性

格式：document.表單名.框體名.框體屬性.屬性類型

例證：

<form action=“” name=“fm” />

<input? type=“text” name=“u” />

<input ?type=“checkbox” name=“s” />

</form>

document.fm.u.value 獲得值

document.fm.u.value.length 獲得值的長度

document.fm.s.checked 獲得

div的標(biāo)簽獲得

document.getelementById(id名稱).屬性.屬性類型

例證；

Htm文本

<divid=“uu”>1111111<b>222</b></div>

document.getelementById(“uu”).innerHTML

圖片類文件;

<img src=“1.gif” id=“uu”>

document.getelementById(“uu”).src

標(biāo)簽屬性值

<div id=“uu”style="bground:red">

document.getelementById(“uu”). Style.bground

js輸出的幾種例子：

form表單的輸出: js部分 <script type="text/javascript"> //把值賦值到di=inners的節(jié)點里面： document.getElementById("inners").innerHTML = "<input type='text' name='ip' value='"+ip+"' />"; </script> 輸出部分： <div id="inners" class="inners"></div>/********-****/ <script type="text/javascript"> //把值賦值到id=inners的input里面： document.getElementById("src").setAttribute('value', ip);</script> 輸出部分：value=ip <input type="hidden" name='src' value="" id="src" class="srcs" />div節(jié)點的輸出js部分 <script type="text/javascript"> //把值賦值到di=inners的節(jié)點里面： document.getElementById("inners").innerHTML = '"+ip+"'; </script> 輸出部分：ip的在div里面顯示出來 <div id="inners" class="inners"></div>

第四天

Jquery的學(xué)習(xí)? js類庫

引入方法：第一種方式文件引入；<script type="text/javascript"src="jquery-1.5.1.js"></script>

第二種嵌入式引入：

<scripttype="text/javascript">

?$(document).ready(function(){
??????? $("button").click(function(){
???????????????? $("p").hide();
?????????????????? });

???????? ?});

?</script>

Jq的基本語法：

基礎(chǔ)語法是：$(selector).action()

$符號定義 jQuery

選擇符（selector）HTML 元素

jQuery 的 action() 執(zhí)行對元素的操作

例證：$(this).hide() - 隱藏當(dāng)前元素，this指當(dāng)前元素

$("p").hide()- 隱藏所有<P>

$(".test").hide()- 隱藏所有 class="test"的段落

$("#test").hide()- 隱藏所有 id="test"的元素

基本語法;加載jq方法

$(document).ready(function(){

?--- 相關(guān)代碼----

});

?//函數(shù)的相關(guān)載入類似window.onload但又有區(qū)別

1、Jquery選擇器的各種用法

$(this) 當(dāng)前元素
$("p") 所有<p>元素
$("input") 所有input元素
$(".intro") 所有class=“intro” 的元素
$("p.intro") 所有class="intro" 的<p>元素
$("#intro") id="intro" 的第一個元素
$("ul > li") ul下的所有li節(jié)點
$("ul li:first") 每個<ul> 的第一個<li> 元素
$("[href$='.jpg']") 所有帶有以".jpg" 結(jié)尾的href 屬性的屬性
$("div#intro .head") id="intro" 的<div> 元素中的所有class="head" 的元素
$(li[a:contains('Register')]") 內(nèi)容包含Register的<a>元素
$("input[@name=bar]") name是bar的<input>元素
$("input[@type=radio][@checked]") type是radio的<input>元素
$(“l(fā)i”).not(“ul”) li下沒有包含ul節(jié)點的節(jié)點元素
$("span[@id]") 包含id屬性的<span>元素
$("[@id=span1]") id為span1的節(jié)點元素

2、Jquery事件器的介紹

$(selector).click() 被選元素的點擊事件
$(selector).dblclick() 被選元素的雙擊事件
$(selector).focus() 被選元素的獲得焦點事件
$(selector).mouseover() 被選元素的鼠標(biāo)懸停事件
$(selector).css(); 被選元素的CSS事件
$(selector). hide(); 被選元素的隱藏事件
$(selector). show('slow'); 被選元素的顯示事件

Jquery實現(xiàn)隱藏顯示的功能：

$(selector).hide(speed,callback)? //隱藏

$(selector).show(speed,callback) //顯示

Speed是速度 slow fast具體時間微秒

$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
$("p").show(1000);
});
});
});

$(selector).toggle(speed,callback) //切換功能

$(selector).slideDown(speed,callback) //向下滑動，并顯示遮擋

$(selector).slideUp(speed,callback) //向上滑動，并隱藏遮擋

$(selector). slideToggle(speed,callback)//上下滑動，實現(xiàn)切換

$(selector). fadeOut(speed,callback) //變淡至空

$(selector). fadeIn(speed,callback) //變亮至全部

$(selector).fadeTo(speed,opacity,callback) //變淡至指定效果

$(selector).animate({params},duration,easing,callback)//動畫

幾個實例代碼：

定時器和清除定時

</script>var iTimefunction aa() {aaa.value += "pp";//往input里value寫入pp iTime=setTimeout("aa()",600);//600微妙執(zhí)行一次} function bb() { if (iTime !="") clearTimeout(iTime);//清除定時器 } aa();</script><input type = "text" id = "aaa" > <input type = "button" value = "stop" id = "bb" onclick = "bb()">

jquery的幾個實例代碼：

<html> <head> //引入jq文件使用的是谷歌連接 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){//隱藏p的內(nèi)容 $("button.but").click(function(){$("p").hide("slow"); }); //顯示p的內(nèi)容 $("button#but2").click(function(){$("p").show("slow");});//往#sss的input里面賦值 $("button#but3").click(function(){$("#ss").attr("value","bbbbb");});//指定位置h2添加div信息 $("button#but4").click(function(){$("<div style=\"border:solid 2px #FF0000 \">動態(tài)創(chuàng)建的div</div>").appendTo("h2");});//自定位置添加div信息 $("button#but5").click(function(){testDiv1.innerHTML += "<div style=\"border:solid 1px #FF0000\">輸出到頁面上值</div>";});//alert跳出框 $("button#but6").click(function(){alert("attr(\"width\"):" + $("#testDiv").attr("width")); //undifinedalert("css(\"width\"):" + $("#testDiv").css("width")); //auto(ie6) 或 1264px(ff)alert("width():" + $("#testDiv").width()); //正確的數(shù)值1264alert("style.width:" + $("#testDiv")[0].style.width ); //空值});//bind綁定觸發(fā)事件 $("h2").bind("click", function(){alert( $(this).text() ); });}); </script></head><body > <h2>This is a heading</h2> <p >This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is another paragraph.</p> <h2>This is a heading</h2> <p >This is another paragraph.</p> <p>This is another paragraph.</p> <p>This is another paragraph.</p> <p>This is another paragraph.</p><div class="testDiv1" id="testDiv1"></div><div id="testDiv">測試文本</div> <form> <input type="text" class="ss" id="ss" value="aaa" width="100px"> </form> <button type="button" class="but">1</button> <button type="button" id="but2" >2</button> <button type="button" id="but3" >3</button> <button type="button" id="but4" >4</button> <button type="button" id="but5" >5</button><button type="button" id="but6" >6</button><button type="button" id="but7" >7</button><input type = "text" id = "aaa" ></body> </html>

總結(jié)

以上是生活随笔為你收集整理的js专题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

js
专题

上一篇： Ancient China Story
下一篇：如何取得Win7文件的管理员权限？