jquery 快速入門學習總結
jquery簡介
jquery 是一個免費,開源的javascript 庫.
jquery作用
方便完成web前端的工作,例如節點操作,元素操作,事件綁定,ajax操作,並且解決了大部分的兼容問題
jquery使用配置
1.本地配置
1.1 下載jquery文件, www.jquery.com
1.2 引入,放在文件同目錄
<script type="text/javascript" src="jquery.1.8.3.min.js"></script>
2.遠程訪問文件
<script src="http://www.xiaohigh.com/jquery.js"></script>
3.檢測配置
alert($); $ 是jquery對象的簡寫 alert(jQuery);
4.元素基本獲取
4.1 通過id查找元素 $('$id');
4.2 通過標籤名或者元素獲取 $('div');
4.3 通過class屬性獲取 $('.class');
4.4 逗號並列獲取 $('$id,.class');
4.5 空格層級獲取 $('$id .class') //中間有空格
5.過濾獲取
5.1 獲取第一個元素$('li:first')
5.2 獲取最後一個元素$('li:last')
5.3 獲取指定索引的元素 $('li:eq(5)') 或者 $('li').eq(5);
5.4 獲取包含指定文本的元素$('li:contains("國")')
5.5 通過屬性查找元素 $('input[name=username]') 通過單個屬性名和屬性值查找
$('input[type=text][name=phone]') 通過多個屬性名和屬性值進行查找
6.父子節點獲取(重點)
6.1 獲取所有的子元素$('ul').children()
6.2 獲取第一個子元素$('ul li:first-child')
6.3 獲取最後一個元素$('ul li:last-child')
6.4 獲取指定索引的元素$('ul li:nth-child(1)')
6.5 獲取下一個元素 $('#id').next()
6.6 獲取上一個元素$('#id').prev()
6.7 獲取父級元素$('#id').parent()
6.8 獲取先輩元素$('#id').parents('tr') (重點)
6.9 獲取同輩元素$('#id').siblings()
6.10 在父級元素中查找元素$('ul').find('.class')
7.元素的操作
7.1 attr()
attr傳兩個參數的時候是設置,傳一個的時候是獲取
可以對屬性進行操作,例:<div id='dvs'></div>
$('#dvs').attr('class','cur'); 設置屬性
$('#dvs').attr('class'); 獲取屬性
7.2 removeAtrr()
$('#dvs').removeAttr('src'); 移除屬性
8.樣式操作
8.1 css()
例:$('#divs').css('width','200px'); 設置css屬性 在括號內可通過中括號進行多個屬性設置
8.2 addclass()
添加類樣式
8.3 removeClass()
移除類樣式
9.文本操作
9.1 text()
$('#dvs').text('<a href="">汽車</a>'); 設置結果會包含a標籤
9.2 html()
$('#dvs').html('<a href="">生活</a>');設置結果只有值(生活)
9.2 from元素的值操作
值的獲取和設置
9.2.1 $(element).val() 獲取
9.2.2 $(element).val('牛') 設置
9.3 其他
9.3.1 相對於文檔的偏移量 offset()
$('#dvs').offset().left
9.3.2 獲取元素相對於父級的偏移量 position()
$('#dvs').position()
9.3.3 元素的滾動距離(既可以獲取也可以設置) scrollLeft() scrollTop()
9.3.4 寬度和高度
width 獲取可視區域的寬度 $(window).width()
獲取整個文檔的寬度$('document').width()
獲取元素的寬 $('element').width()
height 獲取可視區域的高度 $(window).height()
獲取整個文檔的高度 $('document').height()
獲取元素的寬 $('element').height()
10 節點操作
10.1 創建節點操作
$('<div></div>')
$('<div class='cur'><span>hello world</span></div>')
10.2 插入節點
10.2.1 內部尾部添加
$(parent).append(newNode)
newNode.appendTo(parent)
10.2.2 內部頭部添加
$(parent).prepend(newNode)
$(newNode).prependTo(parent)
10.2.3 元素外部之後添加
$(element).after(newNode)
newNode.insertAfter(element)
10.2.4 元素外部之前添加
$(element).before(newNode)
newNode.insertBefore(element)
10.3 刪除節點
$(element).remove() 刪除當前節點
$(element).empty() 清空節點
10.4 替換節點
替換節點 $(element).replaceWith(newNode)
10.5 克隆節點
克隆節點 $(element).clone(true)
10.6 包裹元素
包裹元素 $(element).wrap('<div></div>') 當前的元素被其他的元素包裹
$(element).unwrap() 解除包裹
11. 事件綁定
基本綁定
$(element).click(function(){})
$(element).dblclick(function(){})
加載完畢事件
$(document).ready(function(){}) //和onload一樣
$(function(){})
方法綁定
$(element).bind('click',function(){})
$(element).unbind()
$(element).on('click', function(){})
動態綁定
$(element).live('click', function(){}) 可以多個同時綁定,點擊之後同時出發一個函數
11.2 事件觸發
$(element).trigger('click') //自動觸發事件
11.3 阻止事件冒泡和默認行爲
return false
11.4 獲取當前鼠標的位置和按鍵
$(element).click(function(e){})
var cx = e.clientX
var cy = e.clientY
var px = e.pageX
var py = e.pageY
12 ajax
$.get('1.php',{a=100&b=200},function(data){})
$.post('1.php',{num=10&id=10},function(data){})
$.ajax({
url: '1.php', url請求的腳本
data: 'id=100&page=10', data發送的數據
dataType: 'json', dataType數據的類型
type: 'GET', type請求的類型 get或post
success: function(data){}, success成功的執行代碼
error: function(){}, error失敗的執行代碼
timeout:3000, timeout 超時時間
async: false async是否異步
})
重點:在php中的數組返回給javascript 讀取
$arr = ['name'=>'世強','age'=>21,'height'=>'167cm'];
$res=json_encode($arr);
echo $res;
//get發送ajax
$.get('4.php',{a:100},function(data){
// console.log(data);
//第一種
//eval('var arr ='+data);
// console.log(data);
//第二種
//var arr = JSON.parse(data);
console.log(arr);
//第三種 json
}.json)
13特效
快速顯示和隱藏
$(element).hide()
$(element).show()
滾動顯示和隱藏
$(element).slideDown()
$(element).slideUp()
漸隱漸顯
$(element).fadeIn()
$(element).fadeOut()
自定義動畫
$(element).animate({},2000)
停止
$(element).stop()
延時
$(element).delay(2000)