您的位置：首页 > Web前端 > JQuery

初识jQuery之--样式表-显示-隐藏

2017-05-31 18:02 471 查看

1）工厂函数：

$ 等价于jQuery,即  $()=jQuery()

$(document).ready(function(){

});

$(function(){

});
//两者通用，第二个时简写

$()的作用是将DOM对象转化为jQuery对象，只有将DOM对象转化为jQuery对象后，才能使用jQuery的方法

2）选择器：

$(“#ID”); id选择器

$(“标签”); 标签选择器

$(“.类型”); 类选择器

3)事件

点击：click

鼠标滑过: mouseover

鼠标滑出：mouseout

显示： show();

隐藏： hide()

**注//hide(2000) show(2000毫秒); 可以定义显示的快慢

当为show(2000) 定义显示的快慢时，hide(2000) 同样也需要定义**

区别：jQuery 去除on！

1）设置css()属性值：

语法：

css(“属性”,”属性值”); //设置一个CSS属性

css({“属性1”:”属性值1”, “属性2”:”属性值2”….}); //设置多个CSS属性

注意：多个属性值时用大括号把所有的属性值括起来

2.添加样式表:

语法：

jQuery对象.addclass(“类样式名”);

注：该方法只针对类选择器！！并且添加样式时，该类名前不带有类符号 .

添加样式表

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>隔行变色--添加类样式</title>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function () {
//设置属性值
$("ul li:even").css("color","red");  //even  奇数  注意下标从 0 开始
//添加类样式
$("ul li:even").addClass("sy");  //没有带类符号 .
})
</script>
<style type="text/css">
.sy{
font-size: 20px;
}

</style>
</head>
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>

鼠标滑过显示与隐藏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>鼠标滑过显示与隐藏</title>
<style type="text/css">
.d1{
background-color: #ff4546;
width: 300px;
position: relative;
}
li{
list-style:none ;
padding-top: 10px;

}
.d1 a{
text-decoration: none;
color: #ffffff;
font-size: 20px;
}
h3{
text-indent: 5em;
}
/*隐藏*/
.d1 div{
display: none;
position: absolute;
top: 0px;
left: 300px;
}

</style>
<script src="../js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
//对所有的 li 标记 进行鼠标滑过  hover  鼠标滑过
$("li").hover(
function(){
//添加多个属性.css({"属性1"："值" ， "属性2":"值"})
$(this).css("background-color","yellow");

//鼠标滑到对应的li上显示 li 的子元素 div
// $(this).children("div").css("display","block");
$(this).children("div").show();
}
);
//鼠标移出事件
$("li").mouseout(
function(){
//css("属性"，"值")；
$(this).css("background-color","#ff4546");

//多个属性值之间，用大括号括起来
//$(this).css()({"background-color":"red","border":"1px"});

//div  隐藏
$(this).children("div").css("display","none");
// $(" li div").hide(1000);  //定义隐藏的速度1000毫秒
//这3种方法都可用
// $(this).children("div").hide();
}
);
});
</script>
</head>
<body>
<div class="d1">
<h2>全部商品分类</h2>
<ul>
<li>
<a href="#">家用电器</a>
<div>
<img src="../../image/1.jpg">
</div>
</li>
<li><a href="#">手机</a>、
<div>
<img src="../../image/1.jpg">
</div>
<a href="#">数码</a>、
<a href="#">京东通信</a>
</li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、
<a href="#">厨具</a></li>
<li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">珠宝</a></li>
</ul>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航