jQuery相关方法2
一、元素样式设置的方式(css,json键值对,链式编程)
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//第一种----普通的css设置
//$("#dv").css("width","100px");
//$("#dv").css("height","100px");
//$("#dv").css("backgroundColor","red");
//第二种-----json键值对格式
//$("#dv").css({"width":"100px","height":"100px","backgroundColor":"red"});
//第三种-----链式编程
$("#dv").css("width","100px").css("height","100px").css("backgroundColor","red");
});
});
</script>
<input type="button" value="设置" id="btn">
<div id="dv"></div>
二、链式编程(概念,前提,经验)
- 概念:对象不停的调用方法----对象.方法().方法().方法().....
- 前提:调用方法,如果返回值还是这个方法,就可以继续的调用方法
- 经验:在jQuery中,一般情况下,对象调用的方法,如果是设置的意思,返回的几乎都还是这个对象,可以使用链式编程
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function () {
$("#btn").click(function(){
console.log($(this).val());//----这个是获取值,返回的已经不是原来的对象,不可用链式编程
console.log($(this).val("嘿嘿"));//-----这是设置值,返回的还是原来的对象,可以链式编程
$(this).val("嘿嘿").css("background","red");
});
});
</script>
<input type="button" value="哈哈" id="btn">
三、元素添加样式(addClass)
.cls{
width: 200px;
height: 200px;
background: red;
}
.cls2{
border: 10px solid #000;
}
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//添加一种样式
//$("#dv").addClass("cls");
//添加两种样式版本1
//$("#dv").addClass("cls").addClass("cls2");
//添加两种样式版本2
$("#dv").addClass("cls cls2");
});
});
//注意:$("#dv").css("class","cls")---不能添加样式
</script>
<input type="button" value="添加" id="btn">
<div id="dv">一个div</div>
四、元素移除样式
.cls{
width: 200px;
height: 200px;
background: red;
}
.cls2{
border: 10px solid #000;
}
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//移除一种样式
//$("#dv").removeClass("cls");
//移除两种样式版本1
//$("#dv").removeClass("cls").removeClass("cls2");
//移除两种样式版本2
$("#dv").removeClass("cls cls2");
});
});
//注意:$("#dv").css("class","")---不能移除样式
</script>
<input type="button" value="移除" id="btn">
<div id="dv" class="cls cls2">一个div</div>
五、案例:网页开关灯
.cls{
background: #000;
}
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
//版本1----hasClass,removeClass,addClass $(function(){
$("#btn1").click(function(){
if( $("body").hasClass("cls")){
$("body").removeClass("cls");
}else{
$("body").addClass("cls");
}
});
});
//版本2----toggleClass切换类样式
$(function(){
$("#btn2").click(function(){
$("body").toggleClass("cls");
});
});
</script>
<input type="button" value="版本1开关灯" id="btn1">
<input type="button" value="版本2开关灯" id="btn2">
六、获取兄弟元素的方法
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//点击第五个li
$("#five").click(function(){
//当前li的所有后面的兄弟元素------nextAll()
$(this).nextAll("li").css("background","red");
//当前li的下一个的兄弟元素------next()
$(this).next("li").css("background","yellow");
//当前li的所有前面的兄弟元素------prevAll()
$(this).prevAll("li").css("background","blue");
//当前li的上一个的兄弟元素------prev()
$(this).prev("li").css("background","orange");
//当前li的所有兄弟元素-------siblings()
//$(this).siblings("li").css("background","purple");
});
});
</script>
<ul>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li id="five">第5个li</li>
<li>第6个li</li>
<li>第7个li</li>
<li>第8个li</li>
<li>第9个li</li>
<li>第10个li</li>
</ul>
七、案例:操作当前元素的兄弟元素样式
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
//知识点:
//1.链式编程----出现断链使用end()方法,修复断链,恢复到断链之前的状态,这种情况不推荐使用链式编程
//2.parent()方法可以找到当前元素的父级元素
//3.find()方法可以找到某个元素
$(function(){
$("ul>li").mouseenter(function(){//鼠标进入事件
$(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
}).mouseleave(function(){//鼠标离开事件
$(this).parent().find("li").css("backgroundColor","")
}).click(function(){//鼠标点击事件
$(this).prevAll("li").css("backgroundColor","blue").end().nextAll("li").css("backgroundColor","yellow");
});
});
</script>
<ul>
<li>第1个div</li>
<li>第2个div</li>
<li>第3个div</li>
<li>第4个div</li>
<li id="five">第5个div</li>
<li>第6个div</li>
<li>第7个div</li>
<li>第8个div</li>
<li>第9个div</li>
<li>第10个div</li>
</ul>
八、案例:tab切换效果
*{
margin:;
padding:;
}
.wrapper{
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
}
.tab{
position: absolute;
left:;
top:;
}
.products{
position: absolute;
left:;
top: 21px;
}
.tab li{
list-style: none;
float: left;
margin: 0 10px;
}
.products div{
width: 300px;
height: 300px;
border: 1px solid #000;
display: none;
}
.active{
background: red;
}
.products .selected{
display: block;
}
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//找到li,注册鼠标进入事件
$(".tab>li").mouseenter(function(){
//当前li添加active样式,而它的兄弟元素则删除
$(this).addClass("active").siblings("li").removeClass("active");
//记录当前元素的索引值
var index=$(this).index();
//li对应的div根据索引值变化,添加selected样式,它的兄弟元素删除这个样式
$(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
});
});
</script>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">鸿星尔克</li>
<li class="tab-item">阿迪达斯</li>
<li class="tab-item">耐克</li>
<li class="tab-item">特步</li>
</ul>
<div class="products">
<div class="main selected">商品1</div>
<div class="main">商品2</div>
<div class="main">商品3</div>
<div class="main">商品4</div>
</div>
</div>
jQuery相关方法2的更多相关文章
- jQuery相关方法10
一.链式编程的原理 <script> //构造函数 function Person(age){ this.age=age; this.sayHi=function(txt){ if(txt ...
- jQuery相关方法9----事件相关
一.事件冒泡和阻止事件冒泡 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></s ...
- jQuery相关方法8-----解绑事件
一.解绑事件方法unbind() 用什么方式绑定的事件,最好用对应的方式解绑事件 unbind("事件名字")括号里写上事件名字,就会解除这个事件 unbind()括号里没有参数就 ...
- jQuery相关方法7----各种事件和绑定事件
一.jQuery事件 1.鼠标事件 click与dbclick事件 click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 $ele.click(): ...
- jQuery相关方法6----三大系列属性
一.获取和设置元素的宽和高------width( )方法和height()方法 <!-- 点击按钮,设置div的宽和高为原来的两倍 --> <script src="ht ...
- jQuery相关方法5----表单相关
一.value属性在表单的相关操作-----val()方法 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js ...
- jQuery相关方法4-----元素创建和移除
一.创建添加元素 父元素.append(子元素)-----被动追加创建 子元素.appendTo(父元素)-----主动追加创建 <script src="http://libs.ba ...
- jQuery相关方法3----动画相关
一.显示和隐藏 show(参数1,参数2)方法和hide(参数1,参数2)方法,动画效果显示和隐藏 参数1是时间,单位毫秒(1000毫秒=1秒),也可以是 "slow"" ...
- jQuery相关方法1
一.设置某个元素的标签内容------.html()方法 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js& ...
随机推荐
- docker 实践七:docker-machine
本篇是关于 docker 三剑客中的 docker machine. 注:环境为 CentOS7,docker 19.03. docker-machine 是 docker 官方三剑客项目之一,它是一 ...
- mysql创建唯一索引UNIQUE INDEX,以及报错“#失败原因: [Execute: Duplicate entry '733186700' for key 'uniq_video_id_index']”
要给t_video_prods表的video_id字段创建唯一所以,可以使用下面这条语句: alter table t_video_prods add UNIQUE INDEX `uniq_video ...
- PEB TEB结构体使用
PEB TEB结构体使用一个可执行文件被OS加载到内存,并处理完成相关的模块加载,导入表处理……及其他必须处理后,形成一个进程.在OS内核中保存有一份关于这个进程的身份证信息,就是平常看到的HANDL ...
- AQS独占式同步队列入队与出队
入队 Node AQS同步队列和等待队列共用同一种节点结构Node,与同步队列相关的属性如下. prev 前驱结点 next 后继节点 thread 入队的线程 入队节点的状态 INITIAl 0 初 ...
- Java 之 OutputStreamReader类
OutputStreamReader类 1.概述 转换流 java.io.OutputStreamReader ,是Writer的子类,是从字符流到字节流的桥梁. 它使用指定的字符集将字符编码为字节. ...
- iOS NSNotificationCenter 使用姿势详解
最近在做平板的过程中,发现了一些很不规范的代码.偶然修复支付bug的时候,看到其他项目代码,使用通知的地方没有移除,我以为我这个模块的支付闪退是因为他通知没有移除的缘故.而在debug和看了具体的代码 ...
- java网络编程--httpurlconnection
HttpURLConnection是基于HTTP协议的,其底层通过socket通信实现.如果不设置超时(timeout),在网络异常的情况下,可能会导致程序僵死而不继续往下执行.可以通过以下两个语句来 ...
- 数据库事务ACID特性(原子性、一致性、隔离性、持久性)
ACID特性: 原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability) 原子性:一个事务必须被视为一个不可分割的最小工作单元,整个 ...
- 【转载】解密ThreadLocal
概述 相信读者在网上也看了很多关于ThreadLocal的资料,很多博客都这样说:ThreadLocal为解决多线程程序的并发问题提供了一种新的思路:ThreadLocal的目的是为了解决多线程访问资 ...
- MySQL主从复制(Centos6.3&MySQL5.6)
环境: Master:Centos 6.3 192.168.1.4 Slave:Centos 6.3 192.168.1.5 MySQL: MySQL-5.6.2 ...