jQuery

  jQuery是一个轻量级的JavaScript第三方库,能够简单方便的进行JavaScript编程。

  jQuery选择器

    1,id选择器:

$("#id")

    2,标签选择器:

$("标签名")

    3,类选择器:

$(".类名")

    4,限定选择器:

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

    5,全局选择器:

$("*")  // 找到所有

    6,多项选择器:

$("#id, .类名, 属性名")

    7,层级选择器:x和y可以为任意选择器

$("x y")      // x的所有后代y(子子孙孙)
$("x > y") // x的所有儿子y(儿子)
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y

    8,属性选择器:

$(input [type])           // 找到有type属性的input标签
$(input [type="text"]) // 找到type属性值为text的input标签
$(input [type="text"]) // 找到type属性值不为text的input标签

    9,选择器的筛选:

:first         // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

      实例:

$("div:has(h1)")      // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签

    10,from表单常用筛选:

:text        // 筛选type是text的标签
:password // 筛选type是password的标签
:file // 筛选type是file的标签
:radio // 筛选type是radio的标签
:checkbox // 筛选type是checkbox的标签 :submit // 筛选type是submit的标签
:reset // 筛选type是reset的标签
:button // 筛选type是button的标签

      表单属性筛选:

:enabled    // 筛选出可用的input标签
:disabled // 筛选出不可用的input标签
:checked // 筛选出有checkbox选项被选中的input标签
:selected // 筛选出有select选项被选中的option标签

  jQuery筛选器

    1,筛选某jQuery对象的下面的元素

jQuery对象.next()  // 筛选出某jQuery对象下面的第一个元素
jQuery对象.nextAll() // 筛选出某jQuery对象下面的全部元素
jQuery对象.nextUntil("选择器") // 筛选出某jQuery对象下面的元素,直到遇到指定的元素为止

    2,筛选某jQuery对象的上面的元素

jQuery对象.prev()  // 筛选出某jQuery对象上面的第一个元素
jQuery对象.prevAll() // 筛选出某jQuery对象上面的全部元素
jQuery对象.prevUntil("选择器") // 筛选出某jQuery对象上面的元素,直到遇到指定的元素为止

    3,筛选某jQuery对象的父元素

jQuery对象.parent()  // 筛选出某jQuery对象的父元素
jQuery对象.parents() // 筛选出某jQuery对象的全部父级元素
jQuery对象.parentsUntil("选择器") // 筛选出某jQuery对象的父级元素,直到遇到指定的元素为止

    4,筛选某jQuery对象的子元素

jQuery对象.children()  // 筛选出某jQuery对象的子元素

    5,筛选某jQuery对象的兄弟元素

jQuery对象.siblings()  // 筛选出某jQuery对象的兄弟元素

    6,常用于和筛选组合方法

.find()   // 从前面的jQuery对象中找出符合条件的元素
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。

  jQuery标签操作

    1,操作标签样式

jQuery标签对象.addClass("类名")   // 给标签添加CSS类名
jQuery标签对象.removeClass("类名") // 删除CSS类名
jQuery标签对象.hasClass("类名") // 判断是否有此CSS类
jQuery标签对象.toggleClass("类名") // 判断是否有此CSS类,有就删除,没有添加

    2,获取标签位置

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

    3,获取标签尺寸

jQuery对象.width()  // 获取宽度
jQuery对象.height() // 获取高度
jQuery对象.innerWidth() // 获取内容宽度加padding宽度
jQuery对象.innerHeight() // 获取内容高度加padding高度
jQuery对象.outerWidth() // 获取内容宽度加padding宽度再加border宽度
jQuery对象.outerHeight() // 获取内容高度加padding高度再加border高度

    4,操作HTML代码

jQuery对象.html()   // 获取第一个匹配元素的html内容,要获取每个就遍历对象再获取
jQuery对象.html("新的内容") // 将匹配到的元素设置为新内容

    5,操作标签的文本内容

jQuery对象.text()   // 获取匹配元素的所有内容
jQuery对象.text("新内容") // 将匹配元素的所有内容设置为新内容

    6,操作标签中的value值

jQuery对象.val()  // 获取第一个匹配元素的当前值
jQuery对象.val("value值") // 将匹配元素中有指定值的元素选中展示出来
jQuery对象.val(["value值1", "value值2"]) // 设置checkbox、select的值

    7,操作标签属性

jQuery对象.attr("属性名")  // 获取匹配到的第一个元素的属性值
jQuery对象.attr("属性名","属性值") // 为匹配到的元素设置属性
jQuery对象.attr({"属性名1":"属性值1","属性名2":"属性值2"}) // 为匹配到的元素设置多个属性
jQuery对象.removeAttr("属性名") // 删除匹配元素中的一个属性 // 对于checkbox和radio使用下面的方法操作属性
.prop("属性名") // 获取属性值
.prop("属性名","属性值") // 设定属性
.removeProp("属性名") // 删除属性

  jQuery文档处理

    1,在指定元素内部的前面添加新的HTML代码

jQuery对象a.prepend(jQuery对象b)   // 将对象b添加到对象a的前面
jQuery对象a.prependTo(jQuery对象b) // 将对象a添加到对象b的前面

    2,在指定元素内部的后面添加新的HTML代码

jQuery对象a.append(jQuery对象b)   // 将对象b添加到对象a的后面
jQuery对象a.appendTo(jQuery对象b) // 将对象a添加到对象b的后面

    3,在指定元素外部的前面添加新的HTML代码

jQuery对象a.before(jQuery对象b)   // 将对象b添加到对象a的前面
jQuery对象a.insertBefore(jQuery对象b) // 将对象a添加到对象b的前面

    4,在指定元素外部的后面添加新的HTML代码

jQuery对象a.after(jQuery对象b)   // 将对象b添加到对象a的后面
jQuery对象a.insertAfter(jQuery对象b) // 将对象a添加到对象b的后面

    5,删除和清空指定的元素

jQuery对象.remove()  // 删除元素本身以及内部的所有元素
jQuery对象.empty() // 清空元素内部的所有元素,不包含本身

    6,元素替换

jQuery对象.replaceWith(替换内容)   // 将对象替换为新内容
替换内容.replaceAll(jQuery对象) // 用新内容替换对象

    7,元素克隆

jQuery对象.clone()  // 克隆一个新元素   有参数true,添加true带元素本身的事件也会克隆

  jQuery事件

    1,常用事件

click  // 单击
dblclick // 双击
mouseenter // 鼠标移动到标签上
mouseleave // 鼠标离开标签 keydown // 按键被按下
keyup // 按键被松开 submit // submit按钮按下时
change // 表单的元素的值被改变时
focus // 当鼠标点击选中的元素或tab键定位元素时
blur // 当选中的元素失去焦点时

    2,事件绑定

某标签.on(events,selector,function(){})

// events为事件   selector为选择器(特定条件下使用)  function为事件要进行的函数

    3,事件委托

      通过给父标签绑定事件,在加上选择器进行限定,从而利用父标签去捕获子标签的事件。

父级标签.on(events,要触发事件的标签,function(){})

    4,事件移除

某绑定过事件的标签.off(events)

    5,阻止后续事件执行

return false;  // 在事件执行函数结束后如过返回的是false则后续的事件不会执行。

    6,页面载入

$(document).ready(function(){
// 在这里写你的JS代码...
})
// 这个函数可以极大的提高web应用程序的响应速度,优化页面载入。

前端开发工具之jQuery的更多相关文章

  1. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  2. web前端开发学习:jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  3. 【翻译】我钟爱的Visual Studio前端开发工具/扩展

    原文:[翻译]我钟爱的Visual Studio前端开发工具/扩展 怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做 ...

  4. 前端开发工具-VsCode插件【个人开发常用】

     前端开发工具-VsCode插件[个人开发常用] Atom One Dark Theme-主题 Chinese (Simplified) Language Pack for Visual Studio ...

  5. 在线调试和演示的前端开发工具------http://jsfiddle.net/

    在线调试和演示的前端开发工具------http://jsfiddle.net/

  6. sublime 前端开发工具

    http://code.kpman.cc/2014/10/14/sublime-text-3-mac-%E6%8C%87%E5%8D%97/ gif 屏幕录制:http://recordit.co/ ...

  7. Sublime Text前端开发工具介绍

    Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...

  8. 超高速前端开发工具——Emmet

    [由于 CSDN 不支持富文本编辑器写的文章迁移到 Markdown 编辑器中修改,已重发了一个重新排版的版本, 新版链接:http://blog.csdn.net/ys743276112/artic ...

  9. 【前端开发工具】WijmoJS 2018 v3 正式发布,全面支持Angular7

    WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效地导出PDF.智能的分组表头属性.全新的 ...

随机推荐

  1. node中__dirname、__filename表示的路径

    __dirname 表示当前文件所在的目录的绝对路径__filename 表示当前文件的绝对路径module.filename ==== __filename 等价process.cwd() 返回运行 ...

  2. linux系统 (实验一)实验楼的课程笔记

    实验楼的课程笔记 tab 键是命令补全 输入 tail  find / 立刻卡住 这时候ctrl+c 可以终端当前指令 一些常用的指令 Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂停当前程序 ...

  3. 移动HTML5前端框架—MUI

      前  言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...

  4. 第三十一讲:UML类图(上)

    类名 成员变量:属性 成员函数:方法 访问权限-属性名-属性的类型 访问权限-方法名-返回值,还可以传递参数列表. 继承类的类图 JAVA里面类的访问权限只有两种:package(默认的访问权限)和p ...

  5. em grid control网格控制

    网格控制 必须管理许多的数据库.应用服务器.web服务器和其他构件的企业可以采用em grid control Em grid control是一个基于web的用户界面,它与oracle企业内所有构件 ...

  6. [运维]Dell R710 raid配置 标签: raid运维 2017-04-15 19:35 581人阅读 评论(16)

    Dell R系列的一些服务器,raid的配置都大同小异,公司大部分的服务器,都是Dell R710型号的,这个型号的raid界面配置起来还是很简单的,下面来跟随小编体验一下raid如何配置吧.ps:图 ...

  7. SSM+Maven+IDEA增删改查

    开发工具 IntelliJ IDEA Apache-tomcat-9.0 JDK 1.8 MySQL 8.0.11 Maven 3.5.4 IDEA+Maven搭建项目骨架 1. 新建Maven项目: ...

  8. 使用HashMap编写一程序实现存储某班级学生信息

    1. 使用HashMap编写一程序实现存储某班级学生信息,要求在屏幕上打印如下列表 学号   姓名   性别   年龄 001    张三   男      23 002    李四   男      ...

  9. Linux平时常用命令_查看进程_监控日志等命令

    1.查进程     ps命令查找与进程相关的PID号:    ps a 显示现行终端机下的所有程序,包括其他用户的程序.    ps -A 显示所有程序.    ps c 列出程序时,显示每个程序真正 ...

  10. jQuery自动过滤单词插件

    在线演示 本地下载