<body>
<input type="button" id="btn1" value="选择为one的元素"/>
<input type="button" id="btn2" value="选择样式为mini的元素"/>
<input type="button" id="btn3" value="选择所有的div元素"/>
<input type="button" id="btn4" value="选择所有元素"/>
<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div> <div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div> <div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div> <span id="four"> </span>
</body>

style.css

body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}
.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
.sub { padding-left:100px;}
.sub input { margin-right:10px; }
.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
} div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
} table { border:0;border-collapse:collapse;}
td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
.even { background:#FFF38F;} /* 偶数行样式*/
.odd { background:#FFFFEE;} /* 奇数行样式*/
.selected { background:#FF6500;color:#fff;}

js代码

<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<script src="../../js/jquery-1.8.3.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","pink");
}); $("#btn2").click(function(){
$(".mini").css("background-color","pink");
}) $("#btn3").click(function(){
$("div").css("background-color","pink");
}) $("#btn4").click(function(){
$("*").css("background-color","pink")
}) $("#btn5").click(function(){
$("#two,mini").css("background-color","pink")
})
})
</script>
</head>

JQuery操作基本选择器的更多相关文章

  1. Jquery操作属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery 操作css 选择器

    .addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...

  4. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  5. Jquery框架1.选择器|效果图|属性、文档操作

    1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...

  6. Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  7. jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性

    使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. jQuery入门(2)使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

随机推荐

  1. 【Python】剑指offer 14:剪绳子

    题目:给你一根长度为n的绳子,请把绳子剪成m段 (m和n都是整数,n>1并且m>1)每段绳子的长度记为k[0],k[1],-,k[m].请问k[0]k[1]-*k[m]可能的最大乘积是多少 ...

  2. Python 列表元素分组,比如 [1,2,3,...20]变成 [[1,2,3],[4,5,6]....](列表生成式解决)

    # 生成一个1到20的列表 a=[x for x in range(1,21)] # 把a列表切片,并赋值给b列表,x为0到20且步长为3的列表,在这里具体为[0,3,6,9,12,15,18] # ...

  3. django处理上传文件配置

    1.sttings中配置 'django.template.context_processors.media' TEMPLATES = [ { 'BACKEND': 'django.template. ...

  4. 安装 ubuntu 后,使用 sed 更换国内源

    cd /etc/aptsed -i "s/archive.ubuntu.com/mirrors.aliyun.com/g" /etc/apt/sources.list也可以使用 1 ...

  5. 动态规划:HDU1864-最大报销额(处理带小数的dp问题)

    最大报销额 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Descriptio ...

  6. HDU 3368 Reversi

    http://acm.hdu.edu.cn/showproblem.php?pid=3368 题意:模拟黑白棋,下一步黑手最大可以转化多少个白旗 分析:暴力 原先的思路是找到D然后遍历其八个方向,直到 ...

  7. thinkpad alert键一直处于按着的状态

    就是alert 一直默认按着的,具体原因,我还没有见过. 但是解决方法很简单,crlt+alert一块按,就好了.

  8. Flask With

  9. Leetcode 523.连续的子数组和

    连续的子数组和 给定一个包含非负数的数组和一个目标整数 k,编写一个函数来判断该数组是否含有连续的子数组,其大小至少为 2,总和为 k 的倍数,即总和为 n*k,其中 n 也是一个整数. 示例 1: ...

  10. [oldboy-django][2深入django]FBV + CBV + 装饰器

    FBV django CBV & FBV - FBV function basic view a. urls 设置 urls(r'^test.html$', views.test) b. vi ...