jQuery_ 基础选择器|学习笔记

简介: 快速学习 jQuery_ 基础选择器

开发者学堂课程【jQuery 开发教程:jQuery_ 基础选择器】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4276


jQuery_ 基础选择器

 

内容介绍

一、课程概要

二、基础选择器

 

一、课程概要

1.基础选择器

⒉属性选择器

3.基础过滤

4.子元素过滤

5.内容过滤

6.表单

7.层级

8.jQuery扩展

9.可见性过滤

 

二、基础选择器

1.All Selector ("*")

描述:选择所有元素。

语法:$("*")

注意︰实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。

举例:

首先创建一个 HTML 文件命名为 select,然后将 jQuery 文件复制到工程中,然后引入文件:

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

Script  是一个闭合的标签,写入 div  标签,然后插入几个标签:

<div>

<span>< / span>

<p></p>

<label>< / label>

< /div>

写入:$( function(){  } 表示文档结构加载完成,不包含图片等非文字的媒体文件。

选择 <div>中所有标签,加上内容:

$("div *" ).html("我们是一家人");

执行,三个标签都添加上了内容。

2.Class Selector (".class")

描述︰选择给定样式类名的所有元素。

语法:$( ".class" )

举例:给 <span >标签加上 class:

<span class="s">< /span>

然后加上内容:

$( function(){

$ (".s" ).html("我们是一家人");

})

执行,此时 <span> 标签被加上了内容。

3.Element Selector ("element")

描述∶根据给定( html)标记名称选择所有的元素。

语法∶$( "element")

举例:

$ (".s" ).html("我们是一家人");

直接写入标签名:

$ ("span" ).html("我们是一家人");

4.ID Selector ("#id")

描述︰选择一个具有给定id属性的单个元素。

语法∶$( "#id" )

比如:给 <p>标签加上 id 为p 然后选择 <p>标签的时候就可以:$("#p" ).html("我们是一家人");

5. Multiple Selector

("selector1, selector2, selectorN")

描述∶将每一个选择器匹配到的元素合并后一起返回。

语法:$( "selector1, selector2, selectorN" )

举例:

在上述基础上添加<a><b>标签,分别附上内容,此时选择<span><p><label>标签就可以:

$ ( function()i

$ (""#p,span,label" ).html("我们是一家人")﹔

注意,用逗号分开。

此时执行结果如下:

图片27.png

相关文章
N..
|
1月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
14 1
|
3月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
28 2
|
3月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
40 5
|
6月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
31 0
|
6月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
6月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
37 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
9 1
|
1月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
13 0
|
1月前
|
前端开发 JavaScript 索引
第二章jQuery选择器
第二章jQuery选择器
8 0