JQuery操作基本选择器
<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操作基本选择器的更多相关文章
- Jquery操作属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Jquery操作层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery 操作css 选择器
.addClass() 为每个匹配的元素添加指定的样式类名 .addClass(className) className 为每个匹配元素所有增加的一个或多个样式名 .addClass(function ...
- JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- Jquery框架1.选择器|效果图|属性、文档操作
1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...
- Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性
使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery入门(2)使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
随机推荐
- PAT basic 1087
1087 有多少不同的值 (20 分) 当自然数 n 依次取 1.2.3.…….N 时,算式 ⌊n/2⌋+⌊n/3⌋+⌊n/5⌋ 有多少个不同的值?(注:⌊x⌋ 为取整函数,表示不超过 x 的最大自然 ...
- 【Todo】 cygwin下emacs中M-x shell 中出现乱码
- Storm: 遇到问题总结
1.没有ack : kafkaspout id 重复导致每次读最新没有数据. 2.由于storm提供的读取kafka的enternal工具存在bug,导致重复读取数据,致使数据不准确.storm bu ...
- J.U.C 系列之 Tools
JDK 5.0 开始,java并发大师Doug lea 为我们带来了更高效更应用的java并发API Java.util.concurrent包,简称J.U.C J.U.C 体系由如下五个知识结构构成 ...
- [原]sencha touch之布局
今天记录一下关于sencha touch中的几种布局,其实很简单的,还是直接上代码,一目了然 1:box布局,其实就是vbox和hbox,说白了一个是横着摆放,一个是竖着摆放 Ext.applicat ...
- python上数据存储 .h5格式或者h5py
最近在做城市计算的项目,数据文件是以.h5的格式存储的,总结下其用法和特点 来自百度百科的简介: HDF(Hierarchical Data Format),可以存储不同类型的图像和数码数据的文件格式 ...
- Android TV 开发(2)
本文来自网易云社区 作者:孙有军 首先来看看拨号界面的配置代码: <LinearLayout xmlns:android="http://schemas.android.com/apk ...
- 【Combination Sum 】cpp
题目: Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C ...
- 【Rotate List】cpp
题目: Given a list, rotate the list to the right by k places, where k is non-negative. For example:Giv ...
- flask url_for()和redirect的区别
一. 两者用来重定向的时候,被操作的对象不同. redirect直接是url,就是app.route的路径参数. url_for()是对函数进行操作. from flask import Flask, ...