1.js和jquery对象的转换
js==>jquery对象 $(js对象)
jquery==>js jq对象[index] jq对象.get(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="item">qing</li>
<li>qingqing</li>
<li>qingqingqing
</ul>
<script src="jquery.js"></script>
<script>
//js innerText innerHTML value
//标签属性的操作 .src .href .id .claaName
//样式 .style.属性
//DOM操作
var datas = ["red","green","yellow"]
//1.jquery对象转化成js对象（js包含jquery）
// console.log($("li")[0]);
var item = document.getElementsByClassName("item")[0];
//让js对象转换成jquery对象
// console.log($(item));
console.log($(item).css("color","red").click(function(){
alert(1111);
}))
//链式编程
$(item).css("color","red").click(function(){
alert(111);
})
for(var i = 0;i < datas.length;i++){
$("li")[i].style.backgroundColor = datas[i];
}
</script>
</body>
</html>
2.选择器：选中标签对应的jq对象
jq高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<p id="a">qing</p>
<p>q</p>
<p>ing</p>
</div>
<p>zhang</p>
<script src="jquery.js"></script>
<script>
$(function () {
// $(".box>p").css("color","green");
//挨着的下一个兄弟元素
console.log($("#a+p"));
})
</script>
</body>
</html>
基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
var i = 2;
$(`ul li:eq(${i})`).css("color","red");
$("ul li:first").css("color","red");
$("ul li:last").css("color","red");
})
</script>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{
border: none;
outline: none;
200px;
height: 100px;
font-size: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<form action="#">
<input type="text" name="user" aaa="bbb">
<input type="password" name="pwd">
<input type="submit" >
</form>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log($("input[type=text]"));
})
</script>
</body>
</html>
筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="father">
<p>qing</p>
<a href="#">asd</a>
<span>qwe</span>
<div class="g">
<span>91</span>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
// console.log($(".father").find(".g"));
$(".g").click(function () {
//js对象
// console.log(this);
// $(this).css("color","red");
});
//find()方法会找到后代无论是子代还是子孙
// console.log($(".father").find("span"));
//谁触发了点击事件this就是谁
// $(".father").find(".g>span").click(function () {
// console.log(this)
// })
//只找子代
console.log($(".father").children("span"));
//parent()获取的是亲爹
console.log($(".g span").parent());
})
</script>
</body>
</html>
3.siblings方法（排他思想）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
//点元素 变红色
$("ul li").click(function () {
$(this).css("color","red").siblings("li").css("color","black");
})
})
</script>
</body>
</html>
4.选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
.box{
400px;
height: 300px;
}
.box ul {
100%;
overflow: hidden;
}
.box ul li{
float: left;
50px;
height: 70px;
margin: 0 10px;
background-color: red;
text-align: center;
line-height: 70px;
}
a{
color: #fff;
}
.active{
100%;
height: 100px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
</ul>
<div class="active">
</div>
<form action="#">
<input type="text" value="123">
</form>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
console.log($("input[type=text]").val("111"));
//初始化操作
$(".box ul").html(`<li>
<a href="javascript:void(0);">张三</a>
</li>
<li>
<a href="javascript:void(0);">李四</a>
</li>
<li>
<a href="javascript:void(0);">王五</a>
</li>
<li>
<a href="javascript:void(0);">赵六</a>
</li>`);
//点击a标签的时候执行的操作
$(".box ul li a").click(function () {
$(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
var textVal = $(this).text();
var newVal = `<h1>${textVal}</h1>`;
$(".active").show().html(newVal);
})
})
</script>
</body>
</html>
5.动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn">动画</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
$("#btn").click(function () {
// $(".box").hide();
//toggle自己判断显隐状态
$(".box").stop().toggle(1000);
})
})
</script>
</body>
</html>
6.自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
position: absolute;
left: 20px;
top: 30px;
100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<button>动画</button>
<div></div>
<script src="jquery.js"></script>
<script>
$(function () {
// $('div').animate(
// {
// param1: value1,
// param2: value2
// },
// speed,
// function() {
// /* stuff to do after animation is complete */
// });
$("button").click(function () {
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
var json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定义动画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
});
})
})
</script>
</body>
</html>
7.html的标签属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.tt{
color: red;
}
.active{
color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="jquery.js"></script>
<script>
$(function () {
//初始化操作
// $(".box").html("<a href='http://www.baidu.com'>百度一下</a>");
$(".box").html("<a id='anchor'></a>");
$("#anchor").attr("href","http://www.baidu.com").text("百度一下");
console.log($("#anchor").attr("id"));
$("#anchor").attr({
title:"123",
class:"tt"
});
$("body").click(function () {
// $("#anchor").attr("class","active");
$("#anchor").addClass("active");
//移除多个类名
$("#anchor").removeClass("active tt");
$("#anchor").removeAttr("title href");
})
})
</script>
</body>
</html>
8.prop标签对象属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
男<input type="radio" name="sex" checked>
女<input type="radio" name="sex">
<script src="jquery.js"></script>
<script>
$(function () {
// console.log($("input[type=radio]").eq(0).attr("checked"));
console.dir($("input[type=radio]").eq(1).prop("checked"));
$("input[type=radio]").eq(1).prop("abc","123");
console.log($("input[type=radio]").eq(1));
})
</script>
</body>
</html>
9.控制元素显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
200px;
height: 200px;
background-color: red;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<button>隐藏</button>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
// var isShow = true;
// $("button").click(function () {
// if (isShow){
// $(".box").addClass("hidden");
// isShow = false;
// } else{
// $(".box").removeClass("hidden");
// isShow = true;
// }
// })
$("button").click(function () {
$(".box").toggleClass("hidden");
})
})
</script>
</body>
</html>
10.选项卡的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.box{
400px;
height: 300px;
}
.box ul{
100%;
overflow: hidden;
}
.box ul li{
float: left;
50px;
height: 70px;
margin: 0 10px;
background-color: red;
text-align: center;
line-height: 70px;
}
a{
color: #fff;
}
.active{
100%;
height: 100px;
background-color: green;
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<button class="next">下一张</button>
<div class="box">
<ul>
<li>
<a href="javascript:void(0);">张三</a>
</li>
<li>
<a href="javascript:void(0);">李四</a>
</li>
<li>
<a href="javascript:void(0);">王五</a>
</li>
<li>
<a href="javascript:void(0);">赵六</a>
</li>
</ul>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
var count = 0;
$(".next").click(function () {
console.log(1)
count++;
$('ul li').eq(count).css('backgroundColor','green').siblings('li').css('backgroundColor','red');
$("div.active").eq(count).addClass("show").html("abc").siblings("div.active").removeClass("show");
})
$(".box ul li a").click(function () {
$(this).css("color","green").parent("li").siblings("li").find("a").css("color","#fff");
//index()方法获取索引
console.log($(this).parent().index());
})
})
</script>
</body>
</html>