Web前端开发JQuery框架(5)

阅读量：5222 次

发布时间：2019-06-14

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

JQuery 是一个兼容多浏览器支持的JavaScript库,其核心理念是write less,do more(写得更少,做得更多),它是轻量级的js库,兼容CSS3还兼容各种浏览器,需要注意的是后续版本将不再支持IE6/7/8浏览器,jQuery使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互,jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择,jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可,在后续的开发工作中我们经常会用到JQuery框架,你也能够在各种的网页结构中发现它的身影.

JQuery 常用选择器

JQuery 选择器是JQuery框架的基础,JQuery对事件处理,DOM操作,CSS动画等都是在选择器基础上进行的,JQuery选择器采用CSS和Xpath选择符的能力,能够满足用户在DOM中快速获取元素或元素组,在JQuery中通过各种选择器和方法获取的结果集合实际上都是一个JQuery对象,通过JQuery对象会非常简单,即可实现对元素的各种操作,这里我们介绍几个最常用的选择器例子.

ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下.

    
    
      hello lyshark 
    
    
    
      hello lyshark 
    
    
    
      hello lyshark

标签选择器: 通过使用$("element")标识前缀,匹配页面中所有P标签,并设置成红色.

hello lyshark

hello p

hello lyshark

hello p

类选择器: 通过使用$("ClassName")标识前缀,匹配页面中所有class="MyClass"的类属性.

    
    
      hello lyshark 
    
    
    
      hello lyshark 
    
    
    
      hello lyshark

通配符选择器: 通过使用$("body*")标识前缀,匹配页面中所有开头是div的标签,并设置成绿色.

    
    
      hello lyshark 
    
    
    
      hello lyshark 
    
     hello lyshark 
    
    
      hello lyshark

组合选择器: 使用组合选择器可以扩大选择器的选择范围,可以通过逗号分隔符分割多个不同的选择器.

     hello lyshark 
    
            
     
      hello MyID1 
     
        
     
      hello MyID2 
     
    
    
    
    
      hello lyshark

属性选择器: 根据元素的属性及其值作为过滤条件,来匹配DOM元素,它以中括号作为分界符.

hello P

后代选择器: 该选择器常用于批量修改,匹配所有的后代,所有选中的DIV标签后代都会应用变化.

    
            
     
       hello div div1
     
        
                 
      
       hello div A
      
            
      
       hello div B

子代选择器: 子代选择器常用于缩小查询范围,在匹配的父元素下,选择所有匹配的子元素.

    
            
     
       hello div div1
     
        
     
      hello div A
     
        
                 
      
       hello div A
      
            
      
       hello div B

相邻选择器: 在所有匹配的元素后选择同级别相邻元素,如下匹配所有跟在.outer后面的所有P标签,并设置成红色.

    
            
      hello p1
        
      hello p2
        
      hello p3

兄弟选择器: 兄弟选择器就是在所有匹配的元素后选择同级的所有元素,如下匹配.outer类后面的所有同级DIV标签.

    
    
      hello div1
    
    
    
      hello div2
    
    
    
      hello div3

JQuery 元素的操作

文档对象模型 (Document Object Model,DOM) 是一种W3C标准所有的现代浏览器都支持DOM,DOM用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来,DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容,下面我们将使用JQuery函数库,对网页属性进行各种操作,以下是一些常用的操作方式,其他操作方式请自行百度.

◆文档处理◆

Text(): 该函数常用于设置或者是读取标签里面的内容.

    
            
     
       hello lyshark 
     
        
     
       age:22

html(): 该函数常用于设置或者是读取标签内容,但是可以在设置标签内容的同时添加格式属性.

    
            
     
       hello lyshark 
     
        
     
       age:22

val(): 用于获取或者是设置指定标签的value值.

append(): 给指定的标签添加内容,分别可以在开头插入$().prepend,结尾插入$().append等.

    
    
      hello lyshark --->

appendTo(): 该函数可以实现将外部的标签插入到一个块级标签里面,动态添加元素.

hello h1

hello p1

hello p2

empty()/remove()： 使用empty()可以清空标签中的内容,remove()用于彻底移除标签.

hello p1

hello p2

before()/after(): 可以实现在指定标签的上方(.before)插入内容,或者下(.after)方插入内容.

insertBefore()/insertAfter(): 在每个DIV标签前面(insertBefore)插入新标签,或者在后面(insertAfter)插入.

    
    
      hello div

replaceWith(): 查找与替换,将所有的类属性是class=".MyDiv"的标签替换成粗体的hello div.

    
    
      hello div1 
    
    
    
      hello div2

clone: 克隆并追加一个DIV标签,追加到body页面中.

    
    
      hello div1

◆属性操作◆

attr(): 可实现获取和设置,指定标签的属性信息.

removeAttr(): 找到指定的字段并可以自定义移除相关字段.

prop(): 设置标签的属性,常用于设置单选框和复选框.

removeprop： 删除由prop设置的属性集,(不明白)

addClass(): 动态的将一个CSS属性添加到一些标签中.

        
    
      hello lyshark 
    
    
    
      hello lyshark

removeClass: 动态的将一个CSS属性在标签中删除.

        
    
      hello lyshark 
    
    
    
      hello lyshark

toggleClass: 实现了动态的切换类的样式.使标签不可见.

    
    
      hello lyshark

hasClass(): 该函数用来判断当前的样式,存在返回真,不存在返回假.

    
    
      hello lyshark

◆样式操作◆

修改CSS属性:

    
    
      hello lyshark
    
    
    
      hello lyshark

追加CSS属性:

    
    
      hello lyshark

JQuery 常用筛选器

jQuery 提供了两种选择文档元素的方式：选择器和筛选器,选择器主要模仿CSS和xPath语法,提供高效、准确匹配元素的一般方法和用法,而筛选器是建立在选择器基础上进行的二次筛选,选择器是符合一定规律的字符串组合,而筛选器就是一系列简单、实用的JQuery方法,在 JQuery 框架中,筛选器通过Sizzle.filter子类来实现,它包含过滤、杳找和串联,这里我们只举几个常用例子.

◆过滤筛选器◆

first()/last(): first()筛选出所有li标签中第一个标签,last()筛选出所有标签中的最后一个标签.

even()/odd(): even()筛选出所有li标签中偶数标签,odd()筛选出所有li标签中基数标签.

eq(): 过滤出所有li标签中,索引是2的那个标签.

gt(): 所有li标签中，索引大于2的标签

lt(): 所有li标签中，索引小于3的标签

hasclass(): 检测li中的是否含有某个特定的类，有的话返回true

◆查找筛选器◆

children(): 获取指定标签的所有子标签,以下在类名为"MyForm"盒子里,找所有div子标签,并将其设置为绿色.

    
            
     
       hello lyshark 
     
        
     
       hello lyshark 
     
        
      hello lyshark

parent(): 获取指定标签的所有父标签,以下代码找所有P标签的父标签,并设置成红色.

    
    
      hello lyshark        
      hello p 
        
      hello p

next(): 寻找指定标签的下一个标签,以下代码根据第1个Mydiv1为条件寻找下一个div.

prev(): 寻找指定标签的上一个标签,以下代码根据第2个Mydiv2为条件寻找上一个div.

siblings(): 查找标签的所有兄弟标签,查找所有的同辈标签.

find(): 在form标签中找到text,password标签,并将其设置为绿色.

JQuery 事件的处理

事件是用户在操作浏览器的过程中,由用户触发或由浏览器自身触发的动作,浏览器捕获这些动作,并根据用户编程时设置的对应这些动作的事件处理程序,触发相应的处理过程,从而实现交互过程,浏览器在程序运行的大部分时间都等待交互事件的发生,并在发生时,自动的调用事件处理函数完成整个处理过程,为了更好的兼容不同类型的浏览器,JQuery在JavaScript的基础上,进一步封装了不同类型的时间模型,从而形成一种功能强大,用法更加优雅的JQuery事件模型,下面个将具体介绍几种常用的用法.

注册单次事件: one()方法是bind()方法的特例,由它绑定的事件在执行一次相应后就会失效.

注册循环事件: bind()作为统一的接口,用来为每个匹配元素绑定事件处理程序.

绑定多个事件:

表单数据提交:

回调函数:

hello lyshark

标签克隆:

全选与反选:

转载于:https://www.cnblogs.com/LyShark/p/11136282.html

你可能感兴趣的文章

NHibernate.3.0.Cookbook第四章第6节的翻译

查看>>

例1-1

查看>>

Java 8 新特性之 Stream&forEach&map&filter&limit&sorted&统计函数&Collectors&并行（parallel）程序(转)...

查看>>

Windows建立Cucumber和Ruby测试环境

C#编程（二十五）----------接口

Python 3语法小记（九）异常 Exception

查看>>

使用shared memory 计算矩阵乘法（其实并没有加速多少）