jQuery入门(3) Selectors

jQuery Selector 是jQuery库中非常重要的一个组成部分。

jQuery Selector 用来选择某个 HTML元素,其基本语句和CSS的选择器(Selector)是一样的,所有jQuery selector 都是以$()开始。

选择HTML标记

选择某个HTML元素的方法是直接使用该元素的标记名称,比如选择所有 <p>元素

$("p")

下面的例子当用户点击一个按钮时,隐藏所有的<p>元 素

$(document).ready(function(){
   $("button").click(function(){
     $("p").hide();
   });
 });

#id 选择

jQuery #id 选择器用来选择定义了id 属性的元素,网页上元素的id应 保证是唯一的,你可以使用id来选择单个唯一的元素。

比如下面的例子,当点击按钮时,只会 隐藏id为test 的元素。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>     

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>     

</html>

.class 选择器

jQuery .class 选择器选择所有定义了class属性为制 定值的所有元素,比如下面的例子 隐藏所有类名称为test的元素:

<!DOCTYPE html>  

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>     

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, function
, this
, selector
, 元素
, 选择
Selectors
jquery selectors、python3 selectors、jquery 入门、jquery入门到精通 pdf、jquery入门教程,以便于您获取更多的相关知识。

时间: 2024-08-17 16:16:07

jQuery入门(3) Selectors的相关文章

jquery入门教程

jQuery入门(1) 概述 jQuery入门(2) 基本语法 jQuery入门(3) Selectors jQuery入门(4) Events jQuery入门(5) 显示/隐藏内容 jQuery入门(6) 淡入淡出效果 jQuery入门(7) 滑动效果 jQuery入门(8) 动画效果 jQuery入门(9) 终止动画 jQuery入门(10) 回调函数 jQuery入门(11) 方法链 jQuery入门(12) HTML Get jQuery入门(13) HTML Set jQuery入门

jQuery入门基础知识学习指南_jquery

打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document

jquery入门菜鸟的疑问

问题描述 jquery入门菜鸟的疑问 $(document).ready(function(){ alert("asdasdasd"); });这段代码没有生效,不只是否是js类库没有加载到 我是在myeclipse里做的,jquery-1.7.2.js是放在/WebRoot/WEB-INF/js/jquery-1.7.2.js jsp文件时放在/WebRoot/index.jsp 解决方案 解决方案二: 问题不清楚,不知道你是否引入了js

jQuery入门[1]-构造函数

体积小(v1.2.315kb) 丰富的DOM选择器(CSS1-3+XPath) 跨浏览器(IE6,FF,Safari,Opera) 链式代码 强大的事件.样式支持 强大的AJAX功能 易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个 jQuery对

jQuery入门(13) HTML Set

上篇介绍HTML Get,jQuery其实使用上面同样的三个方法来赋值. text() – 设置或取得指 定元素的文本内容. html() – 设置或取得指定元素的内容(包括HTML标记) val() – 设置或 取得表单某个输入域的值. 比如下面代码就是使用上面三种方法给HTML元素或Form赋值 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("

jQuery入门(12) HTML Get

jQuery库包含了很多用来改变和操作HTML元素及其属性的方法. 其中一个非常重要的部分就是 jQuery可以用来操作DOM. 本篇介绍使用jQuery来取得DOM节点元素的值或属性. 其中三个简单而 有用的方法如下: text() – 设置或取得指定元素的文本内容. html() – 设置或取得指定 元素的内容(包括HTML标记) val() – 设置或取得表单某个输入域的值. 例如,下面代码 使用html()和text()方法取得HTML元素的内容: $("#btn1").cli

jQuery入门(11) 方法链

jQuery支持将多个方法链接在一起,比如介绍的多个animation(),这个链接也可以应用到其它方法 ,构成一个方法链. 使用这个方法,对于同一个元素,链接多个方法,浏览器无需多次查找HTML元 素. 下面的方法,可以把css,slideUp,slideDown串接在一起: $("#p1") .css("color","red") .slideUp(2000) .slideDown(2000); 以上是小编为您精心准备的的内容,在的博客.问答

jQuery入门(5) 显示/隐藏内容

jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show()可 以用来显示和隐藏内容.比如下面的例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery Demo</title> <script src="scripts/jquery-1.9.1.js&qu

jQuery入门(4) Events

学习了jQuery的选择器,就可以针对选择的HMTL标记或是元素添加事件处理,事件包括按键,鼠标 ,单击按钮等. 下面为常见的DOM事件: 鼠标事件 键盘事件 表单事件 文档/窗口事 件 click keypress submit load dblc lick keydown change resize mouseenter key up focus scroll mouseleave   blur unload jQuery事件处理的语法 在jQuery中 ,大部分的DOM事件都有对应的jQu