Python3.5 學習十七

jQuery

　　模塊=類庫　　jQuery就是DOM　　、BOM、Javascript的封裝成的類庫

　　1、查找元素、DOM只有10種左右選擇器

　　　　　　　　　　jQuery有不少選擇器和篩選器

　　　　PS：jQuery 推薦1系列最新版本，兼容性更好 1.12

　

　　　　對象轉換：一　　jquery對象[0]　　=>Dom對象

　　　　

　　　　

　　　　對象轉換二：$(Dom對象)=jquery對象

　　　　

　　　　選擇器：$('')=jQuery('') =document.getXXX('')

　　　　1　　ID　　：$('#id')

　　　　2　　class　　：$('.c1')

　　　　3　　標籤　　:$('a')

　　　　4　　全部　　$('*')

　　　　5　　組合　　$('a,.c2,#i10')

　　　　6　　層級　　$('#i10 a')　　子子孫孫

　　　　　　　　　　  $('#i10>a')　　只找兒子　　

　　　　　　　　　　  $('#i10+')　　　下一個

 　　　　　　　　　　 $('#i10-')　　　 前一個

　　　　7　　篩選器（能夠與上面選擇器組合使用）

　　　　　　　　:first　　$('#i10>a:first')　　第一個

• • • :not(selector)　　　　不選擇、除了
    • :even　　　　奇數個
    • :odd　　　　偶數個
    • :eq(index)　　　　根據索引查找$('#i10 a:eq(0)')
    • :gt(index)　　　　索引大於多少的
    • :lang^{1.9+　　　　語音識別、翻譯時用}
    • :last　　　　最後一個
    • :lt(index)　　　　索引小於多少的
    • :header　　　　找到全部的H標籤
    • :animated　　　　正在執行動畫的
    • :focus　　　　獲取焦點的
    • :root^1.9+
    • :target^1.9+

　　　　8　　屬性　　$('[xxx]')　　　　具備屬性xxx的標籤

　　　　　　　　$('[xxx="123"]')　屬性xxx等於123的標籤

　　　　9　　表單選擇器：能夠不用記，用屬性選擇器也能解決

　　　　　　　　$(':text')=$('input[type='text']')　　

　　2、操做元素

　　　　實例：多選、反選、全選

　　　　jQuery方法內置循環，不須要再循環操做

　　　　$(':checkbox').each(function (k) {
　　　　
　　　　//this = DOM標籤，當前循環的元素　　$(this)
　　　　//k 當前索引值
　　　　　　　　　　　　　　　　})

　　　　　　設置值　　$(this).prop('checked',false)　　

　　　　　　選擇值　　$(this).prop('checked')

　　　　　三元運算的使用　　var v=條件?真值:假值

 

　　　　左側菜單：

　　　　

$(this).next() 
$(this).prev() 
$(this).parent() 
$(this).children() 
$(this).siblings()
$(this).find()

jQuery的鏈式編程，多語句有時能夠疊加寫。

標籤文本操做：查看$('').text()　　　　　　
　　　　　　　　　$('').html()　
　　　　　　　　　　$('').val()　
若是加參數，則爲設置內容
input系列的值操做，只要DOM的value操做的，這裏都同樣:　　$('').val()查看
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$('').val('')賦值

PS:寫事件的兩種方式，無論傳過來的仍是直接在script中建立事件方法，this都是DOM標籤對象
1 若是在標籤裏直接寫事件，則在script中　　

1　　function edit(this) {
　　//this是DOM標籤對象
　　}

2　　$('.header').click(function (k) {
　　//this是DOM標籤對象　
　　}

樣式操做：addClass，removeClass，hasClass，toggleClass（樣式沒有則添加，有則刪除）


屬性操做： 
$('').attr　　
專門用於作自定義屬性　　　能夠設置屬性
$('').attr('type')　能夠查看屬性
$('').attr('key','value') 能夠設置屬性
與之相對　　$('').removeattr('key') 刪除屬性

$('').prop
專門用於爲checkbox和radio類標籤作操做的，不要用attr作這些標籤的操做，可能會失效
$('').prop('checked',true)　設置值
$('').prop('checked')　　　　獲取值

文檔處理
var temp = 字符串拼接
$('').append(temp);
$('').prepend(temp);
$('').after(temp);
$('').before(temp);
$('').remove();
$('').empty();
$('').clone();

CSS處理：
$('').css('樣式名稱','樣式值')

點贊：須要用到的功能點：
$('').append()
setinterval
透明度
position
字體大小設置

位置：
$(window).scrollTop() 獲取
$(window).scrollLeft()
$(window).scrollTop(0) 設置
$(window).scrollLeft(0)

$().offset() 獲取座標 相對整個窗口的位置
$().offset().top
$().offset().left

$().position() 相對上一個relative的標籤的相對位置

$().height() 獲取標籤的純高度
$().innerHeight() 獲取邊框+純高度
$().outerHeight()

寫例子：獲取純高度、邊框、外邊距、內邊距

綁定事件的方式
DOM：三種

jQuery: 1 $().click() ...不少 把on都去掉了

2 $().bind('click',function(){})
$().unbind('click',function(){})

3 $('.c').delegate('a','click',function(){}) ***委託 這是比較牛掰的方式去動態綁定新增標籤的事件
$('.c').undelegate('a','click',function(){}) 只有在代碼執行的時候纔會綁定事件

4 $().on('click',function()) 基本型

$().outerHeight(true)

a標籤 加載onclick事件後，若是事件最後返回false，則不會再執行href的網址跳轉了
兩種綁定方式的不一樣，DOM方式，須要多寫一個return
onclick = "return clickon();
若是用jquery方式，則不用寫return

阻止事件發生
jquery的each方法，作判斷和返回時，false只退出each的函數體，最外層函數並不會返回false值，只能作一個flag來處理

正常頁面執行順序
全部元素渲染完成後，纔會加載script事件

想要提早加載事件
<SCRIPT>
$(function () {

});
當頁面框架加載完畢後，就執行這裏面的script事件綁定

jQuery的擴展
1 $(''）.jquery的選擇器的方法
2 ￥.ajax() jquery擴展
$.fn.extend
$.extend

爲避免引入多種第三方擴展致使方法名、變量名重複的問題，可使用自執行函數方法去規避
把每一個擴展都包裝在一個自執行函數體內
(function(arg) {
var status = 1;

arg.extend({
'func_name':function(){

}
}
);

})(jQuery);

jQuery做業：
1 練習獲取標籤高度和邊框、純高度的
2 全部示例手敲一遍
3 實現編輯框功能

js正則　　正則表達式用\   \括起來

　　　　兩種方法來使用　　

test　　判斷字符串是否符合規定的正則

rep = /\d+/;

rep.test('dafdasf432aaaa')

# true

 

rep = /^\d+$/;

rep.test('sadfasdfasd34535qqq')

# false

 

exec提取根據正則匹配到的數據

rep = /\d+/;

str = "wangshen_67_houyafa_20"

rep.exec(str)

# ['67']

 

分組匹配1

"JavaScript is more fun than Java or JavaBeans!"

var pattern = /\bJava(\w+)\b/;

# ['JavaScript','Script']

全局匹配

var pattern = /\bJava\w+\b/g;

# ['JavaScript']

# ['Java']

# ['JavaBeans']

# null

全局分組匹配

var pattern = /\bJava(\w+)\b/gm;

# ['JavaScript','Script']

# ['Java','']

# ['JavaBeans','Beans']

# null

基於jQuery的三大第三方組件
1、BootStrap　　最強大、既有組件也有多種模板可直接修改使用
2、EasyUI　　　　界面通常，能夠修改使用
3、JQueryUI　　　界面較爲好看，裏面可能會用到Ajax。直接使用能夠，但若是要修改起來會比較麻煩。

推薦使用BootStrap
之後寫代碼優先從網上找現成的合適本身的組件或模板，修改使用，以提升工做效率。
BootStrap使用中注意三點：
1、響應式佈局：@media 根據條件變化修改CSS樣式
2、圖標、字體：使用字體來作圖標，調用的時候直接根據圖標代碼來調用圖標就能夠用了。
3、基本使用：調用樣式，若是作必定的修改，並且寫在了前面，若是想生效，則在後面加上 ！ important

輪播插件的使用：
bxslider.com

jQuery學習參考網站：

http://jquery.cuishifeng.cn/