JQuery基礎(chǔ)語法小結(jié)
更新時(shí)間：2015年02月27日 15:02:12 投稿：hebedich
在日常開發(fā)中JQuery是我們使用最頻繁的JS庫(kù)。使用JQuery進(jìn)行開發(fā)，你需要先了解JQuery的基本語法。下面是在學(xué)習(xí)JQuery時(shí)總結(jié)的一些簡(jiǎn)單語法。
1、$(document)將document對(duì)象轉(zhuǎn)換為jquery
復(fù)制代碼 代碼如下:
$(document).ready(function(){
alert("hello world");
});
2、獲取所有的超鏈接對(duì)象，并且增加onclick事件；其實(shí)在底層jquery對(duì)象獲得的每個(gè)標(biāo)簽的數(shù)組，因此我們不需要進(jìn)行循環(huán)了
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("a").click(function(){
alert("hello world");
});
});
3、jquery對(duì)象與dom對(duì)象之間的轉(zhuǎn)換
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var javascriptElement = document.getElementById("clickme");
//將dom對(duì)象轉(zhuǎn)換為jquery對(duì)象
var jqueryElement = $(javascriptElement);
//alert("javascript:" + javascriptElement.innerHTML);//innerHTML獲取標(biāo)簽的內(nèi)容
//alert("jquery:" + jqueryElement.html());
//將jquery轉(zhuǎn)換為dom對(duì)象方式一
var jElement = $("#clickme");
var javascriptEle = jElement[0];
alert("jquery1: " + javascriptEle.innerHTML);
//方式二
var javascriptEle2 = jElement.get(0);
alert("jquery2: " + javascriptEle2.innerHTML);
});
4、jquery解決id值是否存在的問題
復(fù)制代碼 代碼如下:
<a id="hello">click me</a>
<script type="text/javascript">
//以傳統(tǒng)方式解決id為空方式一
if(document.getElementById("helllo")) {
//如果hello不存在會(huì)出錯(cuò)
document.getElementById("helllo").style.color ="red";
}
//方式二
//$("#hello")[0].style.color="red";
//用jquery解決
$("#hello").css("color","red");
//如果只有一個(gè)參數(shù)，則此方法是讀，如果是兩個(gè)參數(shù)則是些功能（css（“”），css（“”，“”））
alert($("#hello").css("color"));
</script>
5、在javascript中規(guī)定，你要操作css屬性時(shí)要將屬性中的‘-'去掉，同時(shí)把后一個(gè)字母大寫；如：background-color 要改成 backgroundColor
6、jquery中也使用選擇器來操縱各種各樣的元素。是繼承了css的設(shè)計(jì)理念，但是把它更是發(fā)揚(yáng)光大了；
7、jquery的幾種書寫形式
1> 方式一
復(fù)制代碼 代碼如下:
$("document").ready(function(){
...
});
2> 方式二
復(fù)制代碼 代碼如下:
$().ready(function(){
...
});
3> 方式三
復(fù)制代碼 代碼如下:
$(function(){
...
});
以上幾種方式是一樣的
希望本文所述對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)能有所幫助。
您可能感興趣的文章:
- ASP.NET jQuery 實(shí)例13 原創(chuàng)jQuery文本框字符限制插件-TextArea Counter
- jQuery實(shí)用基礎(chǔ)超詳細(xì)介紹
- jQuery 文本框得失焦點(diǎn)的簡(jiǎn)單實(shí)例
- jquery基礎(chǔ)教程之?dāng)?shù)組使用詳解
- jQuery基礎(chǔ)知識(shí)小結(jié)
- jQuery基礎(chǔ)語法實(shí)例入門
- jQuery入門介紹之基礎(chǔ)知識(shí)
- JQuery中使文本框獲得焦點(diǎn)的方法實(shí)例分析
- JQuery中基礎(chǔ)過濾選擇器用法實(shí)例分析
- jQuery入門基礎(chǔ)知識(shí)學(xué)習(xí)指南
- Jquery基礎(chǔ)教程之DOM操作
- jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果完整實(shí)例
- JQuery入門基礎(chǔ)小實(shí)例(1)
相關(guān)文章
jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JQEasy-ui在IE9以下版本中二次加載的問題分析及處理方法
之前項(xiàng)目中才用了Easy-ui，但是在同時(shí)使用tree和grid的效果時(shí)，因?yàn)轫?yè)面有倆個(gè)URL,分別為Ajax樹去后臺(tái)取數(shù)據(jù)和Grid取數(shù)據(jù)，在IE9以上以及其他瀏覽器里都沒有問題，在Ie低版本時(shí)會(huì)出現(xiàn)先加載表格，然后一閃而過加載樹渲染頁(yè)面，造成頁(yè)面只有tree數(shù)據(jù)而沒有表格grid數(shù)據(jù)。2014-06-06
Jquery中dialog屬性小記，使用jquery dialog的朋友可以參考下。2010-09-09
jQuery實(shí)現(xiàn)圖片走馬燈效果的原理分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)圖片走馬燈效果的原理,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery實(shí)現(xiàn)走馬燈的相關(guān)html頁(yè)面設(shè)計(jì)、css樣式布局與jQuery相關(guān)函數(shù)的使用,需要的朋友可以參考下2016-01-01
jQuery實(shí)現(xiàn)的簡(jiǎn)單圖片輪播效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單圖片輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)與隨機(jī)數(shù)運(yùn)算操作頁(yè)面元素動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,具有不動(dòng)方向滑動(dòng)、淡入淡出等切換效果,代碼非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-02-02
jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例
這篇文章主要為大家介紹了jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了jQuery each和js forEach用法,結(jié)合實(shí)例形式對(duì)比分析了jQuery each和js forEach具體使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了jquery控制顯示服務(wù)器生成的圖片流,需要的朋友可以參考下2015-08-08
通過這篇文章你可以得到以下收獲JQUERY操作JSON的一些實(shí)現(xiàn)方法。2010-02-02
使用jquery的ajax需要注意的地方dataType的設(shè)置
沒有設(shè)置dataType:'json',就出現(xiàn)無法解析返回的data數(shù)據(jù)，會(huì)把data當(dāng)作字符串處理，而不是json對(duì)象，記得以前是不用設(shè)dataType的，很奇怪，不知道是不是跟jquery版本有關(guān)系2013-08-08