文章目錄
JS
javascript是一門前端編程語言，基礎語法:
1. 基本語法
1). 定義變量: var 變量名='value';
2). 判斷相等?
==: 值是否相等
===: 類型和值是否相等;
3). 判斷語句
if(條件){
滿足條件做的事情
}else{
不滿足條件做的事情
}
4). for循環
for(var i=0; i<count; i++){
循環做的操作
}
5). 函數定義
function 函數名(形參1, 形參2){
return 返回值;
}
********js事件
onsubmit --- 提交事件
onclick ----點擊事件
onfocus -----聚焦事件
onblur -------離焦事件
onchange ---- 當對象信息改變時執行的內容
2. DOM(document object model)
document.getElementsByName --- 返回的是一個列表對象
document.getElementById --- 返回的是一個元素對象
document.createTextNode
document.createElement
NodeObj.appendChild
標籤對象的屬性信息:
innerHTML ---- 當前標籤對象裏面嵌套的html信息
value ---------用戶輸入的信息值
src ------ 獲取圖片的路徑， 通過賦值方式實現修改圖片路徑
checked -----判斷當前多選框是否被選中
jQuery介紹
jQuery是目前使用最廣泛的javascript函數庫。據統計,全世界排名前100萬的網站,有46%使用jQuery,遠遠超過其他庫。微軟公司甚至把jQuery作爲他們的官方庫。
jquery是一個函數庫,一個js文件,頁面用script標籤引入這個js文件就可以使用。
下載地址:
jQuery官方網站: http://jquery.com/
jquery是一個函數庫,一個js文件,頁面用script標籤引入這個js文件就可以使用。
下載地址:
jQuery官方網站: http://jquery.com/
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jQuery加載
將獲取元素的語句寫到頁面頭部,會因爲元素還沒有加載而出錯,jquery提供了ready方法解決這個問題,它的速度比原生的 window.onload 更快。
詳細寫法:
<script type="text/javascript">
$(document).ready(function(){
......
});
</script>
簡寫:
<script type="text/javascript">
$(function(){
......
});
</script>
jQuery選擇器
基本選擇器
jquery用法思想一 ： 選擇某個網頁元素,然後對它進行某種操作
選擇某個網頁元素,然後對它進行某種操作， jquery選擇器 jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。
$(document) //選擇整個文檔對象
$('li') //選擇所有的li元素
$('#myId') //選擇id爲myId的網頁元素
$('.myClass') // 選擇class爲myClass的元素
$('input[name=first]') // 選擇name屬性等於first的input元素
$('#ul1 li span') //選擇id爲爲ul1元素下的所有li下的span元素
選擇器修飾過濾
$('#ul1 li:first') //選擇id爲ul1元素下的第一個li
$('#ul1 li:odd') //選擇id爲ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id爲ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id爲ul1元素下的前三個之後的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
選擇器函數過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等於myClass的div元素
$('div').filter('.myClass'); //選擇class等於myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
選擇器轉移
$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').closest('form'); //選擇離div最近的那個form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內的class等於myClass的元素
操作行間樣式
jQuery用法思想二: 同一個函數完成取值和賦值
// 獲取div的樣式
$("div").css("width");
$("div").css("color");
//設置div的樣式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
$("#div1").addClass("divClass2") //爲id爲div1的對象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id爲div1的對象的class名爲divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
jQuery屬性操作
獲取，設置html內容
// 取出html內容
var $htm = $('#div1').html();
// 設置html內容
$('#div1').html('<span>添加文字</span>');
// 取出文本內容
var $htm = $('#div1').text();
// 設置文本內容
$('#div1').text('<span>添加文字</span>');
獲取，設置屬性值
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
綁定click事件
$('#btn1').click(function(){
// 內部的this指的是原生html對象
// 使用jquery對象用 $(this)
})
jquery特殊效果
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個元素
slideDown() 向下展開
slideUp() 向上捲起
slideToggle() 依次展開或捲起某個元素
$(btn).click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('done!');
});
});