jQuery基本使用-白红宇

jQuery基本使用

阅读量：4493 次

发布时间：2019-06-08

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

1、什么是jQuery

　　jQuery是一个JavaScript函数库。

　　jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

　　jQuery库包含以下功能：

　　　　HTML元素选取

　　　　HTML元素操作

　　　　CSS操作

　　　　HTML事件函数

　　　　JavaScript特效和动画

　　　　HTML DOM遍历和修改

　　　　AJAX

　　　　Utilites

　　提示：除此之外，Jquery还提供了大量的插件。

　　参考链接：

　　　　jQuery教程：

　　　　jQuery官网：

　　　　jQuery API 3.3.1速查表：

2、模块的引用

　　jQuery下载以及在HTML中的引用，参考链接：

3、jQuery对象与DOM对象的相互转换

　　jQuery对象转换为Dom对象： jQuery对象[0] => Dom对象；

　　Dom对象转换为jQuery对象： $(Dom对象) => jQuery对象。

4、查找元素

4.1、选择器

方式	HTML代码	jQuery	结果
根据给定的元素标签名匹配所有元素	DIV1 DIV2	$("div")	[ DIV1 , DIV2 ]
根据给定的ID匹配一个元素。使用任何的元字符作为名称的文本部分，它必须被两个反斜杠转义：\\		$（' #foo\\[bar\\] '）	[ ]
根据给定的css类名匹配元素	<div class='c1'></div>	$('.c1')
将每一个选择器匹配到的元素合并后一起返回,选择器用","隔开		$('a,.c2,i3')
层级选择器：在给定的祖先元素下匹配所有的后代元素		$('#i10 a')
层级选择器：在给定的父元素下匹配所有的子元素		$('#i10>a')
基本筛选器		$(':first,:last,:eq')
属性		$(' [attribute]') $('[[attribute=value]]')

4.2、实例

　　实例1：全选，反选，取消　　

　　实例2：

　　实例3：jQuery方法内置循环

4.3、筛选

方式

方法

过滤

q(index|-index)

first()

last()

hasClass(class)

filter(expr|obj|ele|fn)

查找

next([expr])

nextAll([expr])

nextUtil([expr|element][,filter])

prev([expr])

parent([expr])

children([expr])

siblings([expr])

find(expr|object|element)

5、操作元素

5.1、样式操作

　　addClass('hide')

　　removeClass('hide')

　　$('.c1').toggleClass('hide')

　　实例：


      
       abcde

View Code

5.2、绑定事件

　　$('.header').click(function () { })

5.3、文本操作

jQuery代码	作用
$('i1').text()	获取文本内容
$('i1').text('<a>1</a>')	设置文本内容
$('i1').html()	获取html内容
$('i1').html('<a>1</a>')	设置html内容
$('i1').val()	获取value值
$('i1').val('...')	设置value值

5.4、属性操作

jQuery代码	作用
$(“img”).attr("src")	专门用于做自定义属性.获取属性
$("img").attr("src", "test.jpg")	专门用于做自定义属性.设置属性
$(‘i1’).removeAttr('value')	移除value属性
$("input[type='checkbox']").prop("checked")	获取在匹配的元素集中的第一个元素的属性值
$("input[type='checkbox']").prop("checked", true)	选中所有页面上的复选框
$(this).index()	获取索引位置

5.5、文档处理

jQuery代码	作用
$("p").append("<b>Hello</b>")	向每个匹配的元素内部最后面追加内容
$("p").prepend("<b>Hello</b>")	向每个匹配的元素内部最前面追加内容
$("p").after("<b>Hello</b>")	向每个匹配的元素外部后面追加内容
$("p").before("<b>Hello</b>")	向每个匹配的元素外部前面追加内容
$("p").remove()	从DOM中删除所有匹配的元素
$("p").empty()	删除匹配的元素集合中所有的子节点
$("p").prependTo("#foo")	把所有匹配的元素前置到另一个、指定的元素元素集合中
$("b").clone().prependTo("p")	克隆匹配的DOM元素并且选中这些克隆的副本

　　实例：

View Code

5.6、css处理

　　用法：

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

　　实例：

View Code

5.7、位置

jQuery代码	作用
$('div').scrollTop()	获取滑轮位置
$('div').scrollTop(100)	设置滑轮位置
$('div').scrollLeft()	获取滑轮位置
$('div').scrollLeft(100)	设置滑轮位置
offset	指定标签在html中的坐标
$('#i2').offset().top	top坐标
$('#i2').offset().left	right坐标
position()	获取匹配元素相对父元素的偏移

5.8、尺寸

jQuery代码	作用
$("p").height()	获取标签的高度
$("p").height(20)	设置标签的高度
$("p").innerHeight()	获取第一个匹配元素内部区域高度（包括补白、不包括边框）
$("p").outerHeight()	获取第一个匹配元素外部高度（默认包括补白和边框）
$("p").width()	取得第一个匹配元素当前计算的宽度值
$("p").innerWidth()	获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
$("p").outerWidth()	获取第一个匹配元素外部宽度（默认包括补白和边框）

　　举例说明：

　　input输入框的配置如下：

　　在浏览器中Elements窗口的Styles小窗口中input显示如下图左边部分，在Console中输入的结果如右边部分：

　　因此可知：

　　　　$('[name="n1"]').height() ：只获取匹配元素css样式中heigh属性的值；

　　　　$('[name="n1"]').innerHeight()：获取匹配元素css样式中height属性的值+2*padding属性的值；

　　　　$('[name="n1"]').outerHeight()：获取匹配元素css样式中height属性的值+2*padding属性的值 + 2*border属性的值；

　　　　$('[name="n1"]').outerHeight(true)；获取匹配元素css样式中height属性的值+2*padding属性的值 + 2*border属性的值 + 2*margin属性的值。

　　　　width，innerWidth，outerWidth与上面的情况相似。

5.9、绑定事件

5.9.1、DOM绑定事件

　　三种方式：

5.9.2、jQuery绑定事件

jQuery代码	作用
$('.c1').click()
$('.c1').bind('click',function(){})	为每个匹配元素的特定事件绑定事件处理函数，jQuery 3.0中已弃用此方法，请用代替
$('.c1').unbind('click',function(){})	解除绑定
$('.c1').delegate('a','click',function(){})	指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。jQuery 3.0中已弃用此方法，请用代替。
$('.c1').undelegate('a','click',function(){})
$('.c1').on('click',function(){})	在选择元素上绑定一个或多个事件的事件处理函数
$('.c1').off('click',function(){})	在选择元素上移除一个或多个事件的事件处理函数

　　注意：上面的绑定方式在内部调用的都是on()和off()。

　　实例：为动态创建的标签绑定事件(jQuery版本<1.7)

　　　　如果要给动态创建的标签绑定事件，只能使用delegate()方法。

View Code

　　实例：为动态创建的标签绑定事件(jQuery版本>=1.7)

　　　　自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

　　　　on的具体用法参见链接：

View Code

5.9.3、阻止事件发生

　　点击事件onclick执行完后，如果返回false，将不再执行跳转命令。

　　实例：在a标签绑定的onclik事件中返回false阻止跳转到href页面


      走你1走你2

View Code

5.9.4、当页面框架加载完成之后，自动执行

$(function(){操作程序}）

5.9.5、jQuery扩展

　　$.extend ---> $.方法

　　$.fn.extend --->$('选择器').方法

　　自执行函数

6、实例

6.1、模态对话框

6.2、tab表单

View Code

6.3、form表单验证

6.4、编辑框

    
          Title        
                              
      
                                                            选择                          主机名                          端口                          状态                     
               
                                                                                     ubuntu                          8080                                              在线                                    
                                                                      CentOS                          5000                                              下线                                    
                                                                      archlinux                          9000                                              在线                                    
               
          
    
              
                   
        主机名            
                    
        端口            
                    
        状态