简介

jQuery 是一个 JavaScript 库。jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

一、引入jQuery

1、 
     2、 
     3、    
     

如果使用引用方法引入jquery，建议找到可靠的源

二、选择器

1、通过id查找元素

HTML文件    
             
     
      id=i1
     
    console调试结果$("#i1")    #通过jquery获取id为i1的标签jQuery.fn.init [div#i1, context: document, selector: "#i1"]$("#i1")[0]   #把jquery转换为dom标签
     
      ​id=i1​
     
​var i1 = document.getElementById("i1")  #通过Dom获取标签undefinedi1
     
      ​id=i1​
     
​$(i1)     #把Dom标签转换为jquery对象jQuery.fn.init [div#i1, context: div#i1]

2、通过标签查找元素　　

$("div")   //找到所有div标签的元素

3、通过样式查找元素

$(".myClass")    //得到样式myClass的元素

4、组合选择器selector1,selector2,selectorN查找元素

$("div,span")   //找到所有div和span标签，注意选择器之间用逗号隔开

5、查找所有元素

$("*")    //查找所有元素

6、层级选择器　　

    
            
     
  
      Name:  
        
      
      
       Newsletter:      
        
      
    
     
        
     $("form input")   //找到form标签下的所有input标签结果：[ ,  ]$("form > input")  //找到form标签下的子标签（input）[  ]$("label + input")  //找到所有紧接着label的input标签[ ,  ]$("form ~ input") //找到所有与form标签同级别的input标签[  ]注意：上面示例只要为有效选择器即可

7、基本筛选器　　

    
            
     
        
      
list item 1
        
      
list item 2
        
      
list item 3
        
      
list item 4
        
      
list item 5
    
     
     
     $("li:first")   //获取匹配的第一个元素$("li:last")  //获取匹配的最后一个元素$("li:eq(1)") //匹配一个给定索引值的元素,从0开始计数$("li:gt(1)") //匹配所有大于给定索引值的元素，从0开始计数$("li:lt(2)")  //匹配所有小于给定索引值的元素，从0开始计数:even   //匹配所有索引值为偶数的元素，从 0 开始计数:odd   //匹配所有索引值为奇数的元素，从 0 开始计数:not(selector) //去除所有与给定选择器匹配的元素:header   //匹配如 h1, h2, h3之类的标题元素

还有一些关于内容、可见性选择器详见：http://jquery.cuishifeng.cn/index.html

8、属性选择器

    
            
     
        
      
list item 1
        
      
list item 2
        
      
list item 3
        
      
list item 4
        
      
list item 5
    
     
     
     [attribute]  //匹配包含给定属性的元素例：$("[id]")  //匹配有id属性的元素$("ul[id]")   //查找所有含有 id 属性的ul元素[attribute=value] //匹配给定的属性是某个特定值的元素[attribute^=value] //匹配给定的属性是以某些值开始的元素[attribute$=value] //匹配给定的属性是以某些值结尾的元素[attribute!=value] //匹配所有不含有指定的属性，或者属性不等于特定值的元素。[attribute*=value] //匹配给定的属性是以包含某些值的元素[selector1][selector2][selectorN] //复合属性选择器，需要同时满足多个条件时使用。

9、表单选择器

表单选择器可以用属性选择器代替。这里列举

表单:input:text:password   //匹配所有密码框:radio:checkbox:submit:image:reset:button:file表单对象属性:enabled // 匹配所有可用元素:disabled //匹配所有不可用元素:checked //匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected:selected// 匹配所有选中的option元素

　　

多选，反选，取消示例

    
                         
     
              
                   
                        
选项
                        
IP地址
                        
端口
                   
              
              
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                          
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
              
         
        

二、筛选器　　

在选择器中，有了解到一些基本的筛选器，但是很多情况，上面的筛选器都满足不了。

 

菜单栏示例

    
                 
     
        
      
            
       
        标题一
       
            
       
        内容
       
        
      
        
      
            
       
        标题二
       
            
       
        内容
       
        
      
        
      
            
       
        标题三
       
            
       
        内容
       
        
      
        
      
            
       
        标题四
       
            
       
        内容
       
        
      
    
     
        

　　

    
            
     
        
      
list item 1
        
      
list item 2
        
      
list item 3
        
      
list item 4
        
      
list item 5
    
     
     
     $("li").first()  //获取第一个元素,与$("li:first")区别为，$("li:first")为字符串的形式获取，$("li").first() 对象形式获取$("li").last()  //获取最后一个元素$("li").eq(1) //获取当前链式操作中第N个jQuery对象，返回jQuery对象,可以为负数hasClass(class) //检查当前的元素是否含有某个特定的样式，如果有，则返回true。filter(expr|obj|ele|fn) //筛选出与指定表达式匹配的元素集合。用逗号分隔多个表达式is(expr|obj|ele|fn)    //根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。slice(start, [end])  //相当于切片not(expr|ele|fn)  //从匹配元素的集合中删除与指定表达式匹配的元素has(expr|ele)  //保留包含特定后代的元素，去掉那些不含有指定后代的元素。map(callback) //将一组元素转换成其他数组（不论是否是元素数组）,callback给每个元素执行的函数

　　

children([expr]) //取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。在孩子中查找,表达式可选find(expr|obj|ele) //搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。注意，这里一定要指定表达式，在子子孙孙中查找parent([expr]) //取得一个包含着所有匹配元素的唯一父元素的元素集合。可以使用表达式来筛选.[父元素]parents([expr])  //得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。[祖先元素]next([expr])   //取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。nextAll([expr])  //查找当前元素之后所有的同辈元素。nextUntil([exp|ele][,fil])  //查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止同理还有prev，prevAll，prevUntil，parentsUntilsiblings([expr]) //取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。add(expr|ele|html|obj[,con]) //把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

　　

筛选器整理的有点乱，可详见：http://jquery.cuishifeng.cn/index.html　　

模态对话框示例

    
                 
     
    
     
    
         
     
        
      
            
                   
               
      
        
      
            
       取消        
      
    
     
    
             添加    
     
              
                   
                        
ip
                        
端口
                        
选项
                   
              
              
                   
                        
1.1.1.1
                        
80
                        
编辑  |  删除
                   
                   
                        
2.2.2.2
                        
10
                        
编辑  |  删除
                   
                   
                        
3.3.3.3
                        
20
                        
 编辑  |  删除 
                   
              
         
        

　　

模态对话框改进

    
                 
     
    
     
    
         
     
        
      
            
                   
               
      
        
      
            
       取消        
      
    
     
    
         添加    
     
              
                   
                        
ip
                        
端口
                        
选项
                   
              
              
                   
                        
1.1.1.1
                        
80
                        
编辑  |  删除
                   
                   
                        
2.2.2.2
                        
10
                        
编辑  |  删除
                   
                   
                        
3.3.3.3
                        
20
                        
 编辑  |  删除 
                   
              
         
        

　　

三、属性及样式操作

1、属性操作

//attr专门用于自定义属性$(..).attr('k')        获得n属性的值$(..).attr('k','v')   设置n属性的值为v$(..).removeAttr('k')  移除n属性//专门用于checkbox，radio$(..).prop('k')        获得n属性的值$(..).prop('k','v')        设置n属性的值为v$(..).removeProp('k')        移除n属性如：$("input[type='checkbox']").prop("disabled", false);$("input[type='checkbox']").prop("checked", true);

2、CSS类操作

addClass(class|fn)       //添加样式

removeClass([class|fn])  //移除样式

toggleClass(class|fn[,sw])  //如果存在该样式就移除，如果不存在就添加

3、HTML代码/文本/值

//html()对应DOM中的innerHTML//text()对应DOM中的innerText//val()对应DOM中的value$(..).html()  //获得第一个匹配元素的html内容$(..).html("v") //获得匹配元素的html为v$(..).text()      //取得所有匹配元素的内容。$(..).text("v") //设置元素内容的文本$(..).val()     //获得匹配元素的当前值。该方法大多用于 input 元素，获取value属性的值$(..).val("v") //设置值

　　

TAB切换菜单示例

    
                 
     
        
      
            
       
        菜单一
       
            
       
        菜单二
       
            
       
        菜单三
       
        
      
        
      
            
       
        内容一
       
            
       
        内容二
       
            
       
        内容三
       
        
      
    
     
        

　　

四、文档处理

    
                             
     
        
      
1
        
      
2
        
      
3
        
      
4
        
      
5
    
     
     
         

　　

模态对话框终极版

    
                 
     
    
     
    
         
     
        
      
            
                   
               
      
        
      
            
       取消            
       确定        
      
    
     
    
         添加    
     
              
                   
                        
ip
                        
端口
                        
选项
                   
              
              
                   
                        
1.1.1.1
                        
80
                        
编辑  |  删除
                   
                   
                        
2.2.2.2
                        
10
                        
编辑  |  删除
                   
                   
                        
3.3.3.3
                        
20
                        
 编辑  |  删除 
                   
              
         
        

　　

五、CSS样式操作

1、样式操作

$("选择器").css("css样式名")  //获取样式$("选择器").css("css样式名"，"value")  //设置样式值

点赞操作

    
                 
     
        
      
 
       赞
      
    
     
    
     
        
      
 
       赞
      
    
     
    
     
        
      
 
       赞
      
    
     
        

　　

2、高度操作

html文件

    
             
     
        
        asdasd
        asdasd
        asdasd        
        asdasd
        asdasd
        asdasd        
        asdasd
        asdasd
        asdasd        
        asdasd
        asdasd
        asdasd        
        asdasd
        asdasd
        asdasd    
     
    
     
        
      
    
     
    
     
    

　　

　　

scrollTop([val])：获取匹配元素相对滚动条顶部的偏移

scrollLeft([val])：获取匹配元素相对滚动条左侧的偏移。

 

$(window).scrollTop()    //获取值$("div").scrollTop()        //标签相对滚动条顶部的偏移$(window).scrollTop(0)    //设置值，回到页面顶部同理还有scrollLeft

offset([coordinates])：获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计

$("div").offset()   //获取偏移值$("div").offset().left  //获取left值$("div").offset().top $("div").offset({top:100,left:0}) //设置值

移动面板示例

 

position():获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。

$("#i1").position()   Object {top: 0, left: 260}

3、高度　　

height([val|fn]) ：取得匹配元素当前计算的高度值（px）。

width([val|fn])：取得第一个匹配元素当前计算的宽度值（px）。

innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。

outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框）。

outerWidth([options])：获取第一个匹配元素外部宽度（默认包括补白和边框）。

html文件：    
     
    
     
    $("div").height()  #纯高度100$("div").width()  #纯宽度300$("div").innerHeight()  #纯高度+ padding（补白）104$("div").innerWidth()  #纯宽度+ padding（补白）304$("div").outerHeight()  #纯高度度+ padding（补白）+border(边框)106$("div").outerHeight() #纯宽度+ padding（补白）+border(边框)106

　　

六、事件　

jQuery绑定事件的几种方式：

$(".c1").click()

$(".c1").bind('click',function(){})    //3.0+已弃用，官方解释建议用on

$(".c1").unbind('click',function(){})　

$(".c1").on('click',function(){})　

$(".c1").off('click',function(){})　

$(".c1").delegate('a','click',function(){})　  //3.0+已弃用，使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(".c1").undelegate('a','click',function(){})

阻止事件发生

return false 阻止事件发生

先来回顾下html中的a标签，如果a标签指定href，我们点击a标签就会跳转到相应的网址，这个就相当于一次事件的发生

    
             走你   
         走你        

　　

一个简单的表单验证

    
                 
     
        
      
       用户名 
       
      
        
      
       密码 
       
      
        
      
       
      
    
     
        

　　

页面框架加载后自动执行

(

function

(arg){

        

console.log(arg);

    

})(

'123'

)

　  //当页面框架加载完毕后，自动执行，像我们之前的都是当页面所有元素完全加载完毕后执行

实际应用中，我们一般都用这种方法

(

function

(arg){

        

console.log(arg);

    

})(

'123'

)

　　

七：jquery扩展以及自执行函数的应用

jquery扩展

第一种扩展方式：jQuery.extend(object) 扩展jQuery对象本身。jQuery可以用$代替

jQuery.extend({  min: function(a, b) { return a < b ? a : b; },  max: function(a, b) { return a > b ? a : b; }});jQuery.min(2,3); // => 2jQuery.max(4,5); // => 5　　

　第二种扩展方式：jQuery.fn.extend(object) //扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。jQuery可以用$代替

jQuery.fn.extend({  check: function() {    return this.each(function() { this.checked = true; });  },  uncheck: function() {    return this.each(function() { this.checked = false; });  }});$("input[type=checkbox]").check();   //调用方式与之前有区别，这个一定要用选择器的方式来调用$("input[type=radio]").uncheck();

　　

在我们引用插件的时候，可能会出现全局变量的冲突，这里就要用到自执行函数　　

(function(jQuery){jQuery.fn.extend({  check: function() {    return this.each(function() { this.checked = true; });  },  uncheck: function() {    return this.each(function() { this.checked = false; });  }});})(jQuery)

　　

　　

Ajax　　

页面重载location.reload()

$.ajax({   url:"路径",   type:"类型"   POST、GET等  data：{'user':root}  发送给服务器的数据  success:function(data){} 成功后执行的函数，data为返回的数据 })

　　建议永远让服务器端返回一个字典

return HttpResponse(json.dumps(字典))

　

form表单中的数据打包发送给服务器$.ajax({   url:$("#id").serialize()   type:"类型"   POST、GET等  data：{'user':root}  发送给服务器的数据  success:function(data){} 成功后执行的函数，data为返回的数据 })