Jquery 每天记一点2009-7-2
?
?
1. <script language="javascript" type="text/javascript">??
??? $(document).ready(function(){
??????? $("a").click(function() {
??????? alert("Hello world!");
?? });
});
<script>
???? 上邊的效果是點擊文檔中所有a標簽時將彈出對話框,$("a") 是一個jQuery選擇器,$本身表示一個jQuery類,所有$()是構造一個jQuery
對象,click()是這個對象的方法,同理$(document)也是一個jQuery對象,ready(fn)是$(document)的方法,表示當document全部下載完畢時
執行函數。
2. $("p")和$("#p")的區別,$("p")表示取所有p標簽(<p></p>)的元素,$("#p")表示取id為"p"(<span? id="p"></span>)的元素
3.
屬性
我們以<img id="a" scr="5.jpg"/>為例,在原始的javascript里面可以用var o=document.getElementById('a')取的id為a的節點對象,在用
o.src來取得或修改該節點的scr屬性,在jQuery里$("#a")將得到jQuery對象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多
方法來進行操作,如$("#a").scr()將得到5.jpg,$("#a").scr("1.jpg")將該對象src屬性改為1,jpg。下面我們來講jQuery提供的眾多jQuery方
法,方便大家快速對DOM對象進行操作
herf()?? herf(val)
說明:對jQuery對象屬性herf的操作。
例子:
未執行jQuery前 <a href="1.htm" id="test" onClick="jq()">jQuery</a>jQuery代碼及功能: function jq(){
?? alert($("#test").href());
?? $("#test").href("2.html");
}運行:先彈出對話框顯示id為test的連接url,在將其url改為2.html,當彈出對話框后會看到轉向到2.html
同理,jQuery還提供類似的其他方法,大家可以分別試驗一下:
herf()? herf(val)?? html()? html(val)?? id()? id (val)? name()? name (val)?? rel()? rel (val)
src()??? src (val)?? title()? title (val)?? val()? val(val)
4.
$.browser()? 判斷瀏覽器類型,返回boolen值 $(function(){
??? if($.browser.msie) {
??????? alert("這是一個IE瀏覽器");}
??? else if($.browser.opera) {
??????? alert("這是一個opera瀏覽器");}
})當頁面載入式判斷瀏覽器類型,可判斷的類型有msie、mozilla、opera、safari
5.? 傳統javascript對css的操作相當繁瑣,比如<div id="a" style="background:blue">css</div>取它的background語法是
document.getElementById("a").style.background,而jQuery對css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到jQuery對象[ <div id="a" … /div> ]
$("#a").background()將取出該對象的background樣式。
$("#a").background(“red”)將該對象的background樣式設為red
上面第5條,現在的版本好像不能用,用第六條吧
6.1取得第一個段落的color樣式屬性的值。
jQuery 代碼:
$("p").css("color");
6.2將所有段落的字體顏色設為紅色并且背景為藍色。
jQuery 代碼:
$("p").css({ color: "#ff0011", background: "blue" });描述:
6.3
如果屬性名包含 "-"的話,必須使用引號:
jQuery 代碼:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
6.4將所有段落字體設為紅色
jQuery 代碼:
$("p").css("color","red");
6.5
$("#msg").css("background");????????????? //返回元素的背景顏色
$("#msg").css("background","#ccc")?????? //設定元素背景為灰色
$("#msg").height(300); $("#msg").width("200");?????? //設定寬高
$("#msg").css({ color: "red", background: "blue" });//以名值對的形式設定樣式
$("#msg").addClass("select");?????? //為元素增加名稱為select的class
$("#msg").removeClass("select");?????? //刪除元素名稱為select的class
$("#msg").toggleClass("select");?????? //如果存在(不存在)就刪除(添加)名稱為select的class
?
轉載于:https://www.cnblogs.com/sendling/archive/2009/07/02/1515554.html
總結
以上是生活随笔為你收集整理的Jquery 每天记一点2009-7-2的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 内容样式行为分离
- 下一篇: $0,$#,$@,$+特殊符号的含义,s