jQuery-白红宇

jQuery

阅读量：6799 次

发布时间：2019-06-26

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

jQueryJ简介

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery优势？

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery下载

下载链接：

使用注意事项

一定要先导入后使用

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像var variable = DOM对象$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

基础语法

$(selector).action()// 样式演变，原本应该jQuery();// 为了简化$();

查找标签

基本标签查找

id 选择器

$("#id")

标签选择器

$("标签名")

class选择器

$(".className")

配合使用

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器

$('*')

组合选择器

$('#id,.className,tagName')

层级选择器

$('div span'); // div里面的所有span 所有的子子孙孙都能被查到 (后代选择器)$('div > span'); // div 里面的span 只查第一层 不查嵌套里面的 (儿子选择器)$('div + span'); // div 外面的第一个span 只查div外面的第一个span 嵌套的不查(毗邻选择器)$('div ~ span'); // div 外面的 所有第一层的span 嵌套的不查 (兄弟选择器)

基本素筛选器

$('div:first') // 取第一个div$('div:last') // 取最后一个div$('div:eq(索引值)') // 可以按照索引取第几个div$('div:even') // 匹配所有的索引值为偶数的元素，从0开始计数$('div:odd') //匹配所有所有值为奇数的元素，从0开始计数$('div:get(索引值)') //匹配所有大于给定所有值得元素$('div:lt(索引值)') // 匹配所有小于指定的元素$('div:not(元素选择器)') // 移除所有满足not条件的元素$('div:has(元素选择器)') // 选取所有包含一个或者多个标签在其内的标签(指的是从后代元素开始找)

自定义模态框，使用jQuery实现弹出框和隐藏功能

属性选择器:

[attribute][attribute=value]// 属性等于[attribute!=value]// 属性不等于

例子:

// 示例$("input[type='checkbox']");// 取到checkbox类型的input标签$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器:

筛选器方法

下一个元素:

$("#id").next()$("#id").nextAll()$("#id").nextUntil("#i2")

上一个元素:

$("#id").prev()$("#id").prevAll()$("#id").prevUntil("#i2")

父元素:

$("#id").parent()$("#id").parents()  // 查找当前元素的所有的父辈元素$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们$("#id").siblings();// 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")

等价于$("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于 $("div.c1")

.first() // 获取匹配的第一个元素.last() // 获取匹配的最后一个元素.not() // 从匹配元素的集合中删除与指定表达式匹配的元素.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。.eq() // 索引值等于指定值的元素

示例:

标签操作:

样式操作:

addClass();// 添加指定的CSS类名。removeClass();// 移除指定的CSS类名。hasClass();// 判断样式存不存在toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

位置操作:

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置position()// 获取匹配元素相对父元素的偏移scrollTop()// 获取匹配元素相对滚动条顶部的偏移scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

示例：

  
      
      
      位置相关示例之返回顶部  
    
    
     1
    
    
     2
    
    
     3
    
    
     4
    
    
     5
    
    
     6
    
    
     7
    
    
     8
    
    
     9
    
    
     10
    
    
     11
    
    
     12
    
    
     13
    
    
     14
    
    
     15
    
    
     16
    
    
     17
    
    
     18
    
    
     19
    
    
     20
    
    
     21
    
    
     22
    
    
     23
    
    
     24
    
    
     25
    
    
     26
    
    
     27
    
    
     28
    
    
     29
    
    
     30
    
    
     31
    
    
     32
    
    
     33
    
    
     34
    
    
     35
    
    
     36
    
    
     37
    
    
     38
    
    
     39
    
    
     40
    
    
     41
    
    
     42
    
    
     43
    
    
     44
    
    
     45
    
    
     46
    
    
     47
    
    
     48
    
    
     49
    
    
     50
    
    
     51
    
    
     52
    
    
     53
    
    
     54
    
    
     55
    
    
     56
    
    
     57
    
    
     58
    
    
     59
    
    
     60
    
    
     61
    
    
     62
    
    
     63
    
    
     64
    
    
     65
    
    
     66
    
    
     67
    
    
     68
    
    
     69
    
    
     70
    
    
     71
    
    
     72
    
    
     73
    
    
     74
    
    
     75
    
    
     76
    
    
     77
    
    
     78
    
    
     79
    
    
     80
    
    
     81
    
    
     82
    
    
     83
    
    
     84
    
    
     85
    
    
     86
    
    
     87
    
    
     88
    
    
     89
    
    
     90
    
    
     91
    
    
     92
    
    
     93
    
    
     94
    
    
     95
    
    
     96
    
    
     97
    
    
     98
    
    
     99
    
    
     100

尺寸:

$(window).height()$(window).width()$(window).innerHeight()$(window).innerWidth()$(window).outerHeight()$(window).outerWidth()

文本操作:

HTML代码：

$('#b2').html()// 取得第一个匹配元素的html内容$('#b2').html('你需要替换的值')// 设置所有匹配元素的html内容

文本值：

$('#b2').text()// 取得所有匹配元素的内容$('#b2').text('你需要替换的值')// 设置所有匹配元素的内容

值:

$('#b2').val()// 取得第一个匹配元素的当前值$('#b2').val('你需要替换的值')// 设置所有匹配元素的值$('#b2').val([val1, val2])// 设置多选的checkbox、多选select的值

例子:

篮球足球

设置值：

设置值:

$("[name='hobby']").val(['basketball', 'football']);$("#s1").val(["1", "2"])

示例：

获取被选中的checkbox或radio的值：

女男

可以使用：

$("input[name='gender']:checked").val()

登录校验:

属性操作:

用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值attr(attrName, attrValue)// 为所有匹配元素设置一个属性值attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop() // 获取属性removeProp() // 移除属性

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举个例子：

针对上面的代码，

$("#i1").attr("checked")  // undefined$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

如果换成下面的代码：

再执行：

$("#i1").attr("checked")   // checked$("#i1").prop("checked")  // true

这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

接下来再看一下针对自定义属性，attr和prop又有什么区别：

执行以下代码：

$("#i1").attr("me")   // "自定义属性"$("#i1").prop("me")  // undefined

可以看到prop不支持获取标签的自定义属性。

总结一下：

对于标签上有的能看到的属性和自定义属性都用attr

对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。empty()// 删除匹配的元素集合中所有的子节点。

例子：

点击按钮在表格添加一行数据。

点击每一行的删除按钮删除当前行数据。

替换

replaceWith()replaceAll()

克隆

clone()// 参数

克隆示例：

事件:

click(function(){...})hover(function(){...})blur(function(){...})focus(function(){...})change(function(){...})keyup(function(){...})

keydown和keyup事件组合示例：

    
        
        Title
    
                          #            姓名            操作         
       
                                     Egon                              
                              Alex                              
                              Yuan                              
                              EvaJ                              
                              Gold

hover事件示例：

Title

苍茫的天涯是我的哎，绵绵的青山脚下一片海！

实时监听input输入值变化示例：

  
      
      
      实时监听input输入值变化

事件绑定:

.on( events [, selector ],function(){})

events：事件

selector: 选择器（可选的）

function: 事件处理函数

移除事件

.off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

events：事件

selector: 选择器（可选的）

function: 事件处理函数

阻止后续事件执行

return false; // 常见阻止表单提交等

e.preventDefault();

    
        阻止默认事件

注意：

像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件    $(this).addClass('hover');});$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件    $(this).removeClass('hover');});

阻止事件冒泡

页面载入:

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){// 在这里写你的JS代码...})

简写：

$(function(){// 你在这里写你的代码})

文档加载完绑定事件，并且阻止默认事件发生：

与window.onload的区别

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用

jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {  // 删除按钮绑定的事件})

动画效果

// 基本show([s,[e],[fn]])hide([s,[e],[fn]])toggle([s],[e],[fn])// 滑动slideDown([s],[e],[fn])slideUp([s,[e],[fn]])slideToggle([s],[e],[fn])// 淡入淡出fadeIn([s],[e],[fn])fadeOut([s],[e],[fn])fadeTo([[s],o,[e],[fn]])fadeToggle([s,[e],[fn]])// 自定义（了解即可）animate(p,[s],[e],[fn])

自定义动画示例：

转载于:https://www.cnblogs.com/ZKPython/p/10970436.html

你可能感兴趣的文章

WCF NetTcpBinding Transport安全模式(2) 默认安全配置

查看>>

【分布计算环境学习笔记】2 分布式系统中的面向对象技术

paip.c++ qt 目录遍历以及文件操作

查看>>

银行对账

查看>>

剑指 offer set 16 数字在排序数组中出现的次数

VS2010使用静态编译的qt库（Qt 5）

如何判断一个GPS点是否在以另一个GPS点为圆心100米为半径的圆内（Java代码）

查看>>

【淡墨Unity3D Shader计划】五圣诞用品: Unity在Shader三种形式的控制&混合操作编译...