首页 > 其他分享 >初识jQuery

初识jQuery

时间:2024-06-23 18:59:30浏览次数:3  
标签:jQuery 元素 选取 获取 初识 选择器 属性

jQuery简介:

2006年创建的一个JavaScript库jQuery,为了解决开发过程中的兼容性问题;集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系;

它的主旨是以更少的代码实现更多的功能(Write?less,do?more)

jQuery的基本功能:

a. 访问和操作 DOM 元素

b. 对页面事件的处理

c. 大量插件在页面中的运用

d. 与 Ajax 技术的完美结合

e. 大幅提高开发效率

jQuery环境安装:

方式一:从 jquery.com 下载 jQuery 库

<head>

<script src="jquery-1.10.2.min.js"></script>

</head>

方式二:从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

<head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

</head>

jQuery语法:

美元符号$定义 jQuery

$(document).ready(function(){});

类似JavaScript代码:window.οnlοad=function(){}

$(document).ready 在页面框架下载完毕后就执行;

而 window.onload 必须在页面全部加载完毕(包括下载图片)后才能执行。

$(document).ready(function(){   })

可以简写成 $(function(){   })

$("#btn").click(function(){});  

使用 click() 方法,将函数绑定到指定元素的click 事件中,单击按钮时,绑定的函数就会执行

代码示例:

$(document).ready(function(){

$("#btn").click(function(){

$('.show').show();

});

});

jQuery 选择器:

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 中所有选择器都以美元符号开头:$()

选择器分类:

1.基本选择器:

概念:jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。

选择器    功能                          返回值

#id       根据id属性值选取元素         单个元素

.class   根据class属性值选取元素      元素集合

element   根据给定的标签名选取元素     元素集合

*   选取所有元素,包括html和body  元素集合

selector1 ,selector2....将每一个选择器匹配到的元素合并后一起返回

2.过滤选择器:

概念:过滤选择器附加在所有选择器的后面,通过特定的过滤规则来筛选出一部分元素,书写时以冒号(:)开头

过滤选择器可以分为:

a. 基本过滤选择器

b. 内容过滤选择器

c. 可见性过滤选择器

d. 属性过滤选择器

基本过滤选择器          功能

first()或:first     获取第一个元素

last()或:last  获取最后一个元素

:not(selector)  获取除给定选择器之外的所有元素

:even  获取索引|值为偶数的元素,索引号从0开始

:odd  匹配所有索引值为奇数的元素,从0开始计数

:eq(index)  获取索引值等于index的元素,索引号从0开始

:gt(index)  获取索引值大于index的元素,索引号从0开始

:lt(index)  获取索引值小于index的元素,索引号从0开始

:header  获取所有标题元素,如h1~h6

:animated  获取正在执行动画效果的元素

内容过滤选择器

:contains(text) 获取含有文本内容为text的元素

:empty 获取不包含后代元素或者文本的空元素

:has(selector) 获取含有后代元素为selector的元素

:parent 获取含有后代元素或者文本的非空元素

注意:在 :contains(text) 内容过滤选择器中,如果参数 text内容出现在匹配元素的任何后代元素中,也认为该元素含有文本内容 text。

如果参数 text 使用英文字母,则有大小写的区别;

<input>、<img>、<br> 和 <hr> 等标签属于不包含后代元素和文本的空元素。

可见性过滤选择器

:hidden   选取不可见元素

元素集合,如$(":hidden") 选取所有隐藏的元素

:visible 选取可见元素

元素集合,如$(":visible") 选取所有可见的元素

设置元素不可见的三种方式:

1.css 样式中 display 属性值为 none 的元素、

2.type 属性值为 hidden 的 <input> 元素

3.元素宽高设置为 0 。

属性过滤选择器

概念:属性过滤选择器根据元素的某个属性获取元素,

以“[”号开始、以“]”号结束。

[attr] 获取拥有该属性的所有元素,

如 $('li[title]') 表示获取所有包含title 属性的 <li> 元素

[attr=value] 获取某属性值为 value 的所有元素,

如 $('li[title=test2]') 表示获取所有包含 title 属性且属性值等于 test2 的 <li> 元素

[attr!=value] 获取某属性值不等于 value 的所有元素,

如 $('li[title!=test2]') 表示获取所有包含 title 属性且属性值不等于 test2 的 <li> 元素

[attr^=value] 选取属性值以 value 开头的所有元素,

如 $('a[href^="mailto:"]') 表示获取所有包含 href 属性,且属性值以 mailto: 开头的 <a> 元素

[attr$=value] 选取属性值以 value 结束的所有元素,

如 $('a[href$=".zip"]') 表示获取所有包含 href 属性,且属性值以 .zip 结尾的 <a> 元素

[attr*=value] 选取属性值中包含 value 的所有元素,

如 $('a[href*="jquery.com"]') 表示获取所有包含 href 属性且属性值中包含 jquery.com的 <a> 元素

层次选择器和表单选择器

概念:层次选择器通过 DOM 元素之间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻和兄弟关系。层次选择器由两个选择器组合而成。

后代选择器

语法:selector1 selector2

功能:从 selector1 的后代元素里选取 selector2

栗子:如 $(“#nav span”) 表示选取 #nav下所有的<span>元素

子选择器:

语法:selector1>selector2

功能:从 selector1 的子元素里选取 selector2

栗子:如("#nav>span")表示选取 #nav 的子元素<span>

相邻选择器:

语法:selector1+selector2

功能:从 selector1 后面的第一个兄弟元素里选取 selector2

栗子:如 $("h2+dl") 表示选取紧邻<h2>元素之后的同辈元素 <dl>

可以使用 jQuery 对象的 next() 方法代替

$('h2').next();

同辈选择器:

语法:selector1~selector2

功能:从 selector1 后面的所有兄弟元素里选取 selector2

栗子:如 $("h2~dl") 表示选取 <h2> 元素之后所有的同辈元素<dl>

<div>

<h2></h2>

<dl></dl>

<dl></dl>

</div>

表单选择器:

:input

获取<input> <textarea> <selet> <button元素

:text

获取符合[type=text]的<input> 元素

:password

获取符合[type=password]的<input>元素

:radio

获取符合[type=radio]的<input>元素

:checkbox

获取符合type=checkbox]的<input>元素

:image

获取符合[type=image]的<input>元素

:file

获取符合[type=file]的<input> 元素

:hidden

参考“可见性过滤选择器”

:button

获取butto>元素和符合tye=button的<input>元素

:submit

获取符合[type=submit的<input>元素

:reset

获取符合[type=reset]的<input>元素

表单对象属性过滤选择器

概念:表单对象属性过滤选择器也是专门针对表单元素的选择器,它属于过滤选择器的范畴,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行过滤。

:enabled

选取可用的表单元素

:disabled

选取不可用的表单元素

:checked

选取被选中的<input>元素

:selected

选取被选中的<option>元素

标签:jQuery,元素,选取,获取,初识,选择器,属性
From: https://blog.csdn.net/ArrayAda/article/details/139777366

相关文章

  • 【微服务】第24节:初识搜索引擎 ElasticSearch
    目录1.初识elasticsearch1.1.认识和安装1.1.1.安装elasticsearch1.1.2.安装Kibana1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引1.2.3.正向和倒排1.3.基础概念1.3.1.文档和字段1.3.2.索引和映射1.3.3.mysql与elasticsearch1.4.IK分词器1.4.1.安装IK分词器1.4.2.使......
  • 初识 SpringMVC,运行配置第一个Spring MVC 程序
    1.初识SpringMVC,运行配置第一个SpringMVC程序@目录1.初识SpringMVC,运行配置第一个SpringMVC程序1.1什么是MVC2.SpringMVC概述2.1SpringMVC的作用:3.运行配置第一个SpringMVC程序3.1第一步:创建Maven模块3.2第二步:添加web支持3.3第三步:配置web.xml文件3.......
  • jQuery 教程 (二)
    jQuery 事件常见DOM事件:鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleaveblurunloadhoverjQuery效果jQuery效果- 隐藏和显示<!DOCTYPEhtml><htmllang="en"><head><metacha......
  • 初识Python----“三剑客“之matplotlib(个人总结,一些简单的图形使用,适用于初学者)
            Matplotlib是Python中最受欢迎的数据可视化软件包之一,支持跨平台运行,它是Python常用的2D绘图库,同时它也提供了一部分3D绘图接口,Matplotlib通常与NumPy、Pandas一起使用,是数据分析中不可或缺的重要工具之一。        在数据分析中,我们......
  • jquery 节点
    1..each().each()方法用于遍历jQuery对象集合中的每个元素。$(selector).each(function(index,element){//`this`isthecurrentDOMelementconsole.log(index,element);});2..find().find()方法用于在当前集合的每个元素的子元素中查找匹配的元素。......
  • 一、初识C语言
    1.什么是C语言?c语言是一门通用计算机编程语言,广泛应用于底层开发。c语言的设计目标是提供一种能以简易的方式编译,处理低级存储器,产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。尽管c语言提供了许多低级处理的功能,但仍然保持着良好跨平台的特性,以一个标准规......
  • jquery文本操作、样式属性操作、效果学习
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......
  • 学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
    ......
  • 初识vs code之第一天
    初步创建一个放置代码的文件夹在vscode中选择打开文件夹选项,选中建立的文件夹确定即可在编辑器中选择文件夹右下方文件+号,接着输入所要创建的代码名称 设置编译模式:c_cpp_properties.json完成代码输入之后,鼠标在其代码界面,按CTRL+shift+p快捷键,在弹出的界面中选择:C/C++编辑配......
  • jquery 参数学习
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>jquery使用</title>......