jQuery
?js類庫
?把常用對象或者方法封裝起來 讓我們寫代碼效率更高
?1.jQuery
??DO MORE,WRITE LESS
?2.extjs
?jQuery:
??jquery的引入:
???通過script標(biāo)簽的src屬性引入

??入門
???獲取jquery對象
????$(選擇器) ==jQuery(選擇器)
???獲取值
????jquery.val();
??jquery對象和dom對象的轉(zhuǎn)換
???dom轉(zhuǎn)jquery對象
????var jquery對象=$(dom);
???jquery對象轉(zhuǎn)dom對象
????方式一
?????var dom=jquery對象[index]
????方式二
?????var dom=jquery對象.get(index)
??頁面加載成功事件
???js原生
????οnlοad=function(){
?????
????}
???jquery:
????方式一
?????$(document).ready(function(){});
?
????方式二
?????$(function(){
??????js代碼
?????})
??事件總結(jié)
???掌握
????submit
????click
????focus
????blur
???
???事件綁定
????js原生
?????方式一
??????通過標(biāo)簽的事件屬性綁定
?????方式二
??????派發(fā)機(jī)制
???????元素.事件名=function(){}

????jquery:
?????jquery對象.事件(function(){});
?????jquery對象.click(function(){})
??效果:
???基礎(chǔ) ☆
???show([毫秒值]);顯示
???hide([毫秒值]);隱藏
???toggle([毫秒值]);切換

???了解:
????滑入滑出
?????slideUp([毫秒值]);滑出
?????slideDown([毫秒值]):滑入
?????slideToggle([毫秒值]):切換
????淡入淡出
?????fadeIn([毫秒值]);淡入
?????fadeOut([毫秒值]):淡出
?????fadeTo([毫秒值]):
?????fadeToggle([毫秒值]);切換
?????jquery的選擇器
?基礎(chǔ)選擇器:必須掌握
??id選擇器: #id
??類選擇器: .class
??元素選擇器 :xxx
??所有選擇器 : *
??分組選擇器: 選擇1,選擇器2
?層次選擇器:必須掌握
??a b:a的b后代
??a>b:a的b孩子
??a+b:a的b的大弟弟
??a~b:a的b的所有弟弟
?過濾選擇器:
??特點(diǎn):
???前面都跟上了:
??:first? 第一個元素
??:last?最后一個

??:eq(index) 你指定的索引的元素
??:lt(index)? 小于
??:gt(index) 大于

??:even 偶數(shù)
??:odd 奇數(shù)
?內(nèi)容過濾選擇器
??has(選擇器):
?可見性過濾選擇器:
??:hidden 針對隱藏域 display=none
??:visible 可見的
?屬性選擇
??[zz='z']:選中指定的屬性為指定的值
??[zz]:選中只要含有zz屬性
?表單選擇器:
??:input
???選中form的所有子元素
???input select textarea button
???
??input
??css操作和屬性操作
?css
??獲取或設(shè)置元素樣式
???css("屬性名","值"):設(shè)置css樣式
???css("屬性名");獲取指定屬性名的值
???css({
????"屬性名1":"值1",
????"屬性名2":"值2"
???}); json 設(shè)置多個樣式
??位置
???offset
????left:
????top
?
??寬度
??高度
?屬性操作:
??<xx? 屬性名="屬性值"/>
??獲取設(shè)置屬性操作
???attr("屬性名","值");設(shè)置屬性
???attr("屬性名");//獲取
???attr({
????"屬性名1":"值1",
????"屬性名2":"值2"
???})//設(shè)置多個屬性
???removeAttr("屬性");刪除
??添加一個樣式class屬性
???attr("class","class名字1");
???attr("class","class名字2");
???addClass("class名字");//添加
???removeClass("class名字");//刪除
???
遍歷:
?js原生:
??for(var i=0;i<?;i++){
??}
?jquery:
??方式一:
???想要遍歷的jquery對象.each(function(index,dom){
????
???
???});
??方式二:
???$.each(想要遍歷的jquery對象,function(index,dom){
?
???});
??操作元素的值或者標(biāo)簽體
???xxx():獲取操作
???xxx("值"):設(shè)置
???獲取 或設(shè)置值
????val();
???獲取或設(shè)置標(biāo)簽體
????html()
???獲取或設(shè)置標(biāo)簽體
????text()
??插入操作:
???內(nèi)部插入:
????append()? a.append(b) 把b添加的a的內(nèi)部的后面
????prepend() :a.prepend(b) 把b添加到a的內(nèi)容的前面

????appendTo() a.appendTo(b) 把a(bǔ)添加到b的內(nèi)部的后面
????prependTo() :a.prependTo(b) 把a(bǔ)添加到b的內(nèi)部的前面
???外部插入:
????after(): a.after(c) 在a的后面添加c
????before():a.before(c) 在a的前面添加c

????insertAfter();a.insertAfter(c) 把a(bǔ)添加到c的后面
????insertBefore():a.insertBefore(c) 把a(bǔ)添加到c的前面
???清除操作:
????empty():清除
????remove();移除 自殺
????select下拉選擇框
?屬性:
?? multiple:值multiple 規(guī)定可以多選
?? size:控制顯示的項(xiàng)目的數(shù)目

表單對象屬性過濾選擇器
?:enabled:可用的
?:disabled:不可用
?:checked:(針對的是radio checkbox)
?:selected:下拉選擇框
?validator插件
?基于jquery編寫
?
使用:
?1.首先必須引入jquery庫
?2.引入validator的庫
?3.在頁面加載成功之后指定你想要驗(yàn)證的表單
??$(function(){
???$("選擇器").validate();
??})
?4.validate方法的使用
??$("選擇器").validate({
???rules:{},
???messages:{}
??});
?5.常見的規(guī)則
??required:必須填寫 true|false
??number:必須填寫數(shù)值類型 true|false
??min:最小值 5
??max:最大值
??range: 區(qū)間 [min,max]
??maxlength:|minlength:rangelength
??equalTo:"選擇器"
??digits:整數(shù)
??email:email
?6.規(guī)則的書寫格式:
??$("選擇器").validate({
???rules:{
???
????//書寫格式
???
???},
???messages:{}
??});
??書寫格式:
???方式一:
????想要校驗(yàn)的字段的name屬性名:"規(guī)則名"
???方式二:
????想要校驗(yàn)的字段的name屬性名:{
?????"規(guī)則1":值,
?????"規(guī)則2":值
????}
?7.自定義錯誤提示信息
??書寫格式:
???方式一:
????想要校驗(yàn)的字段的name屬性名:"提示信息"
???方式二:
????想要校驗(yàn)的字段的name屬性名:{
?????"規(guī)則1":"提示信息1",
?????"規(guī)則2":"提示信息2"
????}
?8.validate的自定義規(guī)則
??$.validator.addMethod(name,fn,message);
??name:規(guī)則名
??fn:
???function(value,element,params){
????value:用戶輸入的值
????element:元素本身
????params:參數(shù)
????

???}
???//必須有返回值 boolean
??message:默認(rèn)的提示信息

轉(zhuǎn)載于:https://www.cnblogs.com/outsidersblogs/p/7086935.html

總結(jié)

以上是生活随笔為你收集整理的jQuery初步的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。