jQuery使用总结-白红宇

jQuery使用总结

阅读量：4940 次

发布时间：2019-06-11

本文共 5110 字，大约阅读时间需要 17 分钟。

jQuery的下载直接可以把官网上的源代码复制粘贴下来，然后保存到本地即可。

jQuery选择器

通过一个例子来说明jQuery的几种选择器的用法：

一个简单的没有任何意义的html代码如下：

测试代码1

#根据标签的id选择标签：$("#i1")#根据标签的class选择标签：$(".c1")#根据标签的标签名字选择标签：$("span")#选中所有的标签$("*")#组合选择器，选择所有的id为i1的标签和class为c1的标签$("#i1, .c1")  #中间用逗号分隔。

层级标签---根据标签间关系来选择，示例如下：

#选择父标签下的子标签$("body div") #选择body标签的子标签中的所有的div标签，包含子标签的子标签#选择父标签下的子标签(只父子关系这一层)$("body >div") #不会再选择，子标签div下的子标签。#选择当前标签的下一个标签$("input + div") #选择input标签的下一个标签,"+"后面的div可以省略#选择当前标签的兄弟标签：$("input ~ ")    #当前标签的兄弟标签，也就是同级标签。

一些位置参数的基本标签：

#匹配选中的第一个标签$("div:first") #匹配选中div标签的第一个标签#匹配选中的最后一个标签$("div:last")#根据索引匹配标签$("div:eq(0)")  #选中的div标签中，索引为0的标签。$("div:gt(1)")   #选中的div标签中，索引大于1的标签。$("div:lt(1)")   #选中的div标签中，索引小于1的标签。

根据标签的属性选择：

#选中html中具有name属性的标签$('[name]')#根据属性的确定值来选择标签$("[name='wxz']")#选择指定标签中含有某属性的标签$("div[name='wxz']")#匹配所有的单行文本框$(":text")

以上是jQuery选择器的一部分，更详细的jQuery介绍请参照，

一个jQuery选择器的小例子：

    
          Title        
              
               
               
           
      
    
      
    
      
                                                    选项                      IP                      PORT                 
               
                                                                                     10.0.102.204                          80                     
                                                                      10.0.102.204                          80                     
                                                                      10.0.102.204                          80                     
                                                                      10.0.102.204                          80

选项	IP	PORT
	10.0.102.204	80
	10.0.102.204	80
	10.0.102.204	80
	10.0.102.204	80

实例-1

筛选器

选择器与筛选器的区别：选择器就是定位html文档中要选择的某一类标签，筛选器就是在定位的标签中选择需要的标签。

筛选器示例文档

筛选器的一些用法如下：

#当前标签的下一个标签：$("#i1").next()  #当前标签下面所有的标签：$("#i1").nextAll()#当前标签下一个标签直到“#i2”之间的标签$("#i1").nextUntil("#i2")#与当前标签下一个标签相对的是前一个标签：$("#i1").prev()$("#i1").prevAll()$("#i1").prevUntil()#当前标签的孩子标签：$(".c1").children()#当前标签的父标签$('#i1').parent()     #仅查询一层，即当前标签的父标签$('#i1').parents()    #依次向上查询，可以查询到html标签。$('#i1').parentsUntil() ##查询当前标签子标签中的标签：$("div").find("span")#查询当前标签的兄弟标签$("#i1").siblings()$("#i1").siblings().first()$("#i1").siblings().last()

样式操作

样式操作主要有以下几个：

addClass #添加样式

removeClass #移除样式

toggleClass #样式若存在就删除，若不存在就添加

上面这三个操作是多种css样式构成的css组合的集合操作，若单独只想添加某标签的背景颜色，可以使用如下：

$('t1').css('样式名称', '样式值')；

文本操作

$(..).text()           # 获取文本内容$(..).text(“1”) # 设置文本内容，内容中的标签不会解析                $(..).html()           #获取文本内容$(..).html("1")  #设置内容，但是可以解析                $(..).val()  # 获取input，text，等标签中输入的内容。$(..).val(..) #设置对应标签的内容。

属性操作

# 专门用于做自定义属性$(..).attr('n')  #标签上的属性，获取属性$(..).attr('n','v') #给属性赋值$(..).removeAttr('n')# 专门用于chekbox,radio选中类的操作$(..).prop('checked')$(..).prop('checked', true)index 获取索引位置

文档操作

append：追加到当前标签内容之后prepend：插入到当前标签内容之前before：插入到当前标签之前after：追加到当前标签之后remove：删除empty：只是把标签的内容清空clone：克隆

一些操作的小例子：

左侧菜单栏编辑

根据不同的导航按钮，显示不同内容的实例：

View Code

点赞操作：

点赞操作

动态添加删除操作：(待完善)

    
          Title        
      
                                                    主机名                      端口                      操作                 
               
                                                            172.16.100.129                          80                                              编辑 | 删除                                    
                                             172.16.100.130                          81                                              编辑 | 删除                                    
                                             172.16.100.131                          82                                              编辑 | 删除                                    
               
          
        
          
      
    
              
       主机名        
               
       
        
       端口号