Python3.5 學習十七
jQuery
模塊=類庫 jQuery就是DOM 、BOM、Javascript的封裝成的類庫
一、查找元素、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) 索引大於多少的
- :lang1.9+ 語音識別、翻譯時用
- :last 最後一個
- :lt(index) 索引小於多少的
- :header 找到所有的H標簽
- :animated 正在執行動畫的
- :focus 獲取焦點的
- :root1.9+
- :target1.9+
-
8 屬性 $(‘[xxx]‘) 具有屬性xxx的標簽
$(‘[xxx="123"]‘) 屬性xxx等於123的標簽
9 表單選擇器：可以不用記，用屬性選擇器也能解決
$(‘:text‘)=$(‘input[type=‘text‘]‘)
二、操作元素
實例：多選、反選、全選
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的三大第三方組件
一、BootStrap 最強大、既有組件也有多種模板可直接修改使用
二、EasyUI 界面一般，可以修改使用
三、JQueryUI 界面較為好看，裏面可能會用到Ajax。直接使用可以，但如果要修改起來會比較麻煩。
推薦使用BootStrap
以後寫代碼優先從網上找現成的合適自己的組件或模板，修改使用，以提高工作效率。
BootStrap使用中註意三點：
一、響應式布局：@media 根據條件變化修改CSS樣式
二、圖標、字體：使用字體來做圖標，調用的時候直接根據圖標代碼來調用圖標就可以用了。
三、基本使用：調用樣式，如果做一定的修改，而且寫在了前面，如果想生效，則在後面加上 ！ important
輪播插件的使用：
bxslider.com
jQuery學習參考網站：http://jquery.cuishifeng.cn/
Python3.5 學習十七