jquery的基本选择器和层级选择器

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量119 收藏
点赞数
文章标签： javascript java ViewUI

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'jquery3.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
*{
font:4;
color:RosyBrown;

}
div{
border:1px solid red;
width:210px;
height:210px;
margin:10px;
float:left;
background:SeaShell;
}
div.mini{
width:80px;
height:80px;
margin:10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//基本选择器
//1、ID选择器
$(document).ready(function()
{
/*alert($("#test1")[0].href);
alert($("#test1").length);//只返回一个元素
alert($("#test1").html());//返回的是<h1>goole</h1>
alert($("#test1").text());//返回的是goole
alert($("#test1")[0].innerHTML);*/
//alert($("#test1")[0].innerHTML);
//alert($("#test1")[0].innerText);//在IE中显示google，在火狐中显示undefined
});
//2、类选择器
$(document).ready(function(){
//$(".test").css("fontSize","80px");
//$("h1.test").css("color","red");
//3、标签选择器
//$("p").css("color","green");
//群选择器
//$("p,h1.test").css("color","brown");
$("*").css("fontSize","20px");
});
$(document).ready(function()
{
$("#test1").click(function(){

$("#one").css("background","red");}
);
$("#test2").click(function()
{
$(".mini").css("backgroundColor","blue");;
});
$("#test3").click(function()
{
$("div").css("background","orange");
}
);
$("#test4").click(function()
{
$("*").css("background","blue");
}
);
$("#test5").click(function()
{
$("span,div.mini").css("background","pink");
});
//层级选择器
$("#test6").click(function()
{
$("body div").css("background","red");//选择body内的所有的div元素，然后给它赋值。(不管是直接的后代，还是间接的，只要是再body中的div都要

设置。)
}
);
$("#test7").click(
function()
{
$("body > div").css("background","orange");//选择的是body内的子标签(div)，它只会选择子标签。如果是子标签嵌套的子标签不会起作用
}
);
$("#test8").click(function()
{
$(".one + div").css("background","red");//选择的是class = one的最近的那个标签的。
}
);
$("#test9").click(function()
{
$(".two~div").css("background","red");//选择的是class = two 的后面的兄弟标签(就是属于同一级别的)
});
});


</script>

</head>

<body>
<div id="asd">asdasd</div>
<input type="button" value="button1" id="test1"><br>
<input type="button" value="button2" id="test2"><br>
<input type="button" value="button3" id="test3"><br>
<input type="button" value="button4" id="test4"><br>
<input type="button" value="button5" id="test5"><br>
<input type="button" value="button6" id="test6"><br>
<input type="button" value="button7" id="test7"><br>
<input type="button" value="button8" id="test8"><br>
<input type="button" value="button9" id="test9"><br>
<div id="one" class="one">
id为one，class为one的div
<div class="mini">
class为mini
</div>
</div>

<div id="one" class="two" title="test">
id为one，class为two,title为test的div
<div class="mini" title="other">
class为mini,title为other
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>

<div>

<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
</div>

<div>

<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini">
class为mini
</div>
<div class="mini" title="test">
class为mini,title为test
</div>
</div>
<div>
<input type="hidden">

包含input的type为"hide"的div
</div>
</body>
</html>

iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery之选择器
缚己
11-03 247
基本选择器 基本选择器和CSS中的基本选择器用法一致，如下代码所示： <body> <button id="btn"></button> <button class="cls box"></button> <button class="cls" id="btn2"></button> <script> // 标签选择器 console.log($('button')) // id选择器
jQuery多级联动选择器
06-01
一款多级联动选择器，可自定义层级
select级联选择器参考 原生JS实现和jQuery实现
qq_40178497的博客
03-27 1971
原生JS实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.
jQuery层级选择器（常用）
越努力越幸运的博客
06-27 409
jQuery层级选择器（常用） 层级有四种： 某元素A的所有后代元素B用空格表示（例：form input表示form中的所有input标签） 某元素A的子元素B用>表示（例：form>input仅表示form中的input子元素） 某元素A下边的元素B用+表示（例：label>input表示前面是label的input元素） 某元素A后边的兄弟元素B用~表示（例：form~input表示与form互为兄弟元素的input元素） <!DOCTYPE html> <ht
jQuery实现级联列表
m0_51435825的博客
12-11 331
jQuery实现级联列表
jQuery层级选择器用法分析
10-24
主要介绍了jQuery层级选择器用法,实例分析了常见的四种层级选择器的使用技巧,并给出了实例总结,需要的朋友可以参考下
jQuery层级选择器实例代码
10-20
主要为大家详细介绍了jQuery层级选择器实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery选择器之层级过滤选择器详解
12-11
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
基于jQuery的三层级联选择器
06-01
基于jQuery的三层级联选择器，左右两栏布局，点击空白位置可关闭
jQuery实现级联地区选择
11-23
jQuery+div实现级联省份-城市查询，该实例包含jsp+js+css,所有代码为本人亲自编写，如有疑问请联系本人
jquery 城市联动选择器
08-23
一个支持省市县联动选择的jquery插件。所有联动选择都可以用这个插件。
jquery省份城市选择器
02-24
jquery省份城市选择器 使用方便 界面简洁，速度快
blog-CSS之选择器（基本选择器+层次选择器）
vicki_wei的博客
08-01 1087
在CSS中的学习中，选择器是其中一个重要的内容，想要全部理解透彻也需花费一点时间。下面分为五大类来理解每一种选择器。 基本选择器 1.标签选择器 即选择页面上所有该标签，经常用来描述必要的共同特性。 举例： <style> /*页面所有的p标签字体颜色变红*/ p{ color: red; } /*页面所有的div标签背景颜色变蓝*/ div{ backg...
制作图书简介页面（JavaScript）
weixin_48112113的博客
08-02 5411
1. 任务要求 1）熟悉jQuery的选择器； 2）掌握jQuery的基本选择器； 3）掌握jQuery对象的click()方法； 4）掌握jQuery对象的css()方法；
深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
weixin_34413357的博客
08-23 107
前面的话 　　选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM以及ajax操作都依赖于选择器。jQuery选择器完全继承了CSS的风格，两者的写法十分相似，只不过两者的作用效果不同。CSS选择器找到元素后添加样式，而jQuery选择器找到元素后添加行为。jQuery选择器可以分为基础选择器、层级选择器、过滤选择器和表单选择器四类。对于每类选择器，除了给出jQuery选择器的写...
jquery基本选择器和层级选择器
xiaozhuangyumaotao的博客
06-03 226
jquery基本选择器分类： 1、#id 示例：$(“#box”).css(“color”,”red”); 返回：单个元素组成的集合 注意：一张页面中id不能重复 2、element 示例：$(“div”).css(“color”,”red”); 返回：集合 3、.class 示例：$(“.box”).css(“color”,”red”); 返回：集合 4、* 示例：$(“*”) 返回：集合 5、selector1,selector2...
详解强大的jQuery选择器之基本选择器、层次选择器
weixin_30588827的博客
02-06 103
前言 　　自从接触了jQuery后就为其强大的选择器所震撼，这也正是jQuery的优势所在。 　　jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器(即选择器插件，参考上篇：jQuery插件原来如此简单——jQuery插件的机制及实战)。正是jQuery强大的选...
jQuery中的层级选择器
欢迎来到我的博客，一起学习Java！
08-16 149
话不多说，请看效果： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>04jquer中的层级选择器B</title> <script type="text/javascript" src="js/jquery-1.9.1.js" c...
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 759
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值