jQuery 选择器（开头有脑图）

其他 2020-01-20 08:40:31 阅读次数: 0

Javascript在线代码运行
在这里插入图片描述
jQuery 中所有选择器都以美元符号开头：$()。
jQuery 选择器允许我们对 HTML 元素组或单个元素进行想要的操作。

1.元素选择器
jQuery 元素选择器基于元素名选取元素。

在页面中选取所有

元素:

$("p")

<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js">//导入jquery.min.js"
</script>
<script>
$(document).ready(function(){//读取功能
  $("button").click(function(){//点击功能
    $("p").hide();// 隐藏段落功能
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

2.#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以我要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

实例：

当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){//读取功能
  $("button").click(function(){//点击功能
    $("#test").hide();//隐藏标签功能
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

在这里插入图片描述
在这里插入图片描述
3.
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

实例
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script>
$(document).ready(function(){//可读功能
  $("button").click(function(){//点击功能
    $(".test").hide();//隐藏类标签
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

在这里插入图片描述
在这里插入图片描述

4.CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

实例
下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

这是语法，下文是实例
在这里插入图片描述
实例1：
选取所有元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点击
    $("*").hide();//把选取的所有的类隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

在这里插入图片描述
在这里插入图片描述
实例2：
选取当前 HTML 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js文件
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $(this).hide();//选取当前标签（这里是button）并隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述
实例3：
选取第一个

元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $("p:first").hide();//选取第一个段落标签p并隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述
实例4：
选取第一个

    元素的第一个
  • 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();//选取第一个 <ul> 元素的第一个 <li> 元素（Coffee）并隐藏
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述
实例5：
选取 class 为 intro 的

元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").hide();//选取 class 为 intro 的 <p> 元素并隐藏
  });
});
</script>
</head>
<body>

<h2 class="intro">这是一个标题</h2>
<p class="intro">这是一个段落，点击按钮隐藏。</p>
<p>这是另一个段落，点击按钮不会隐藏。</p>
<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述
实例6：
选取每个

    元素的第一个
  • 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $("ul li:first-child").hide();//选取每个 <ul> 元素的第一个 <li> 元素并隐藏
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述

实例7：
选取带有 href 属性的元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $("[href]").hide();//选取带有 href 属性的元素隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.html.cn">HTML 教程</a></p>
<p><a href="http://www.css.cn">CSS 教程</a></p>
<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述

实例8：
选取所有 target 属性值等于 “_blank” 的 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js文件
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $("a[target='_blank']").hide();//选取所有 target 属性值等于 "_blank" 的 <a> 元素隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.html.cn" target="_blank">HTML 教程</a></p>
<p><a href="http://www.css.cn">CSS 教程</a></p>
<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述
实例9：
选取所有 target 属性值不等于 “_blank” 的 元素


<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js文件
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $("a[target!='_blank']").hide();//把选取所有 target 属性值不等于 "_blank" 的 <a> 元素隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.html.cn" target="_blank">HTML 教程</a></p>
<p><a href="http://www.css.cn">CSS 教程</a></p>
<button>点我</button>

</body>

在这里插入图片描述
在这里插入图片描述

实例10：
选取所有 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script>
$(document).ready(function(){//可读
  $("button").click(function(){//可点
    $(":button").hide();//选取所有 <button> 元素并隐藏
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

在这里插入图片描述
在这里插入图片描述

实例11
选取偶数位置的 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr:even").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>

<table border="1">
<tr>
  <th>网站名</th>
  <th>网址</th>
</tr>
<tr>
<td>Google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>http://www.baidu.com</td>
</tr>
<tr>
<td>W3Cschool教程</td>
<td>http://www.w3cschool.cn</td>
</tr>
<tr>
<td>淘宝</td>
<td>http://www.taobao.com</td>
</tr>
<tr>
<td>Facebook</td>
<td>http://www.facebook.com</td>
</tr>
</table>

</body>

在这里插入图片描述
实例12
选取奇数位置的 元素

<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr:odd").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>

<table border="1">
<tr>
  <th>网站名</th>
  <th>网址</th>
</tr>
<tr>
<td>Google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>http://www.baidu.com</td>
</tr>
<tr>
<td>W3Cschool教程</td>
<td>http://www.w3cschool.cn</td>
</tr>
<tr>
<td>淘宝</td>
<td>http://www.taobao.com</td>
</tr>
<tr>
<td>Facebook</td>
<td>http://www.facebook.com</td>
</tr>
</table>

</body>

在这里插入图片描述

独立文件中使用 jQuery 函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
（通过 src 属性来引用文件）：

<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">//引入jquery.min.js
</script>
<script src="my_jquery_functions.js"></script>
</head>
代码写注释的小猿
发布了478 篇原创文章 · 获赞 673 · 访问量 19万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/YJG7D314/article/details/103756760
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022