Jquery属性操作
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked" name="">是否可见
<input type="checkbox" name="">是否可见
<input type="text" value="123" name="">
<div value="456">
</div>
<div id="di1">
111
<p>ppppp</p>
</div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//属性操作
//判断标签是否有某个属性，返回True或false
// console.log($("div").hasClass("div1"))
//console.log($("div").attr("con","c2"))
// console.log($(":checkbox:first").attr("checked"))
// console.log($(":checkbox:last").attr("checked"))
//如果是固有属性尽量用prop，如果是自己定义的属性尽量用attr
// console.log($(":checkbox:first").prop("checked","checked"))
// console.log($(":checkbox:last").prop("checked"))
// console.log($("div").prop("class"))
//文本操作 固有操做
// console.log($("#di1").html())
//console.log($("#di1").text("<h1>Tang<h1>"))
//console.log($("#di1").html("<h1>Tang<h1>"))
//
//val值操作 固有操作
console.log($(":text").val())
//console.log($(":text").next().val())
$(":text").val("789")
$("div").css({"color":"red","background-color":"green"})
</script>
</body>
</html>
Jquery循环
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p>0000<p>
<p>0000</p>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
arr=[11,22,33]
// for (var i=0;i<arr.length;i++){
// $("p").eq(i).html(arr[i])
// }
//jquery遍历数组 方法一
// $.each(arr,function(x,y){
// console.log(x) 下标
// console.log(y) 当前值
// })
//方式二
$("p").each(function(){
console.log($(this))//$this代指当前标签对象
$(this).text("hello");
})
</script>
</body>
</html>
Jquery 实现左侧菜单点击隐藏事件
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.outer{
height: 1000px;
100%;
}
.menu{
float: left;
background-color: beige;
30%;
height: 500px;
}
.content{
float: left;
background-color: rebeccapurple;
70%;
height: 500px;
}
.title{
background-color: aquamarine;
line-height:40px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
function show(self) {
// body...
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide")
}
</script>
</body>
</html>
Jquery实现模态对话框
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.content{
height: 1800px;
background-color: pink;
}
.shade{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: gray;
opacity: 0.5;
//opacity 透明度
}
.model{
200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
/*height: 50%*/
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="func()">show</button>
hello world
</div>
<div class="shade hide"></div>
<div class="model hide">
<button onclick="cancel()">show</button>
</div>
<script type="text/javascript">
function func (argument) {
var ele_shade=document.getElementsByClassName('shade')[0]
var ele_model=document.getElementsByClassName('model')[0]
ele_model.classList.remove("hide")
ele_shade.classList.remove("hide")
}
function cancel(){
var ele_shade=document.getElementsByClassName("shade")[0]
var ele_model=document.getElementsByClassName("model")[0]
ele_model.classList.add("hide")
ele_shade.classList.add("hide")
}
</script>
</body>
</html>