1.动画出现延迟的问题时 : 用stop()解决
2.值的操作,属性的操作,类的操作 :
html标签属性操作(页面中看到的标签属性)
attr removeAttr()删除属性
DOM对象属性操作(打印jsDOM对象) radio prop() removeprop()
类的操作:
不要使用attr()来操作类;
使用addClass() removeClass() toggleClass()
值的操作 :
text()对于文本的操作,相当于js中的innerText ;
html()对于文本和标签操作,相当于js中innerHTML ;
Val()对于标签中有value属性,表单控件 ;
如果取到的是js对象 , 那么使用js的方法 ;
如果取到的是jquery对象 , 那么使用jquery的方法 ;
实例 :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width:100px;
height:100px;
background-color:red;
}
.active{
background-color:green;
}
</style>
</head>
<body>
<div class="box">alex <h2>太亮</h2></div>
<input type="text" value="123">
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
<script src="jquery.js"></script>
<script>
// 入口函数
$(function(){
// 1.html标签属性操作
// js对象
$("div")[0].id="nana";
// setAttribute 是js对象中的属性,添加属性值
$("div")[0].setAttribute("class","box");
// getAttribute 也是js对象中的属性,获得属性值
var value=$("div")[0].getAttribute("id");
// console.log(value);
// jquery对象 设置单个值
$("div").attr("class","box");
// jquery设置多个属性值
$("div").attr({
// class:"box1",
// id:"box1",
src:"",
href:""
});
// removeAttr是删除属性
// $("div").removeAttr("class id");
// 2.
// var chec=$("input").attr("checked");
// 什么都没有
// console.log(chec);
// console.dir($("input")[0].checked);
// console.dir($("input")[1].checked)
// attr添加的属性可见
// $("input").eq(0).attr("aaa","jajka");
// prop添加类属性,不可见
// $("input").eq(0).prop("tailiang","太亮了");
// console.log($("input").eq(0).prop("checked"))
// 与后端进行交互
// console.dir($("input")[0]);
// $("div").attr("class","box2");
// 相当于 .className=" active";
// attr再次添加属性值的时候会把原有的覆盖掉
// 而addClass则不会
// $("div").addClass("active box2")
// $("div").removeClass("active box2 box")
// $(".box").click(function(event){
// // toggleClass也是添加属性值
// $(this).toggleClass("active");
// });
// 获取文本值 innerText
// console.log($(".box").text());
// 设置值,会覆盖掉原来的文本值
// $(".box").text("tailiang");
//获取文本和标签
// console.log($(".box").html())
// 设置值,会覆盖掉原来的文本值和标签
// $(".box").html("<h1>女神</h1>")
//获取,value值
// console.log($('[type="text"]').val());
$("[type='text']").val("321");
console.log($("[type='text']").val());
console.log($("[type='text']"));
console.log($("[type='text']")[0])
})
</script>
</body>
</html>
3.文档操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="father"></div>
<ul>
<li class="item">alex</li>
</ul>
<h2>alex</h2>
<h3>alex</h3>
<h3>alex</h3>
<h3>alex</h3>
<button>按钮1</button>
</body>
<script src="jquery.js"></script>
<script>
$(function(){
// 创建标签
var oP=document.createElement("p");
oP.innerText="alex";
// $(".father").append("alex");
// $(".father").append("<h1>alex</h1>");
//append是 添加标签$(父标签).append(子标签);
// $(".father").append(oP);
// $(".father").append($("h2"))
// appendTo 也是添加标签$(子标签).appendTo($(父标签))
$("<h2>alex</h2>").appendTo($(".father")).click(function(event){
$(this).css("color","red");
});
// prepend是添加标签和append一样
$("ul").prepend('<li>我是第一个</li>');
// prependTo也是添加标签和appendTo一样
$("<li>我还是第一个</li>").prependTo("ul");
// 同级之间插入
// $("ul").after("<div>2</div>");
$(".item").after("<li>在alex的后面</li>");
$("ul").before("<div>在列表的前面</div>");
// replaceWith是替换$(被替换的值).replaceWith(要替换的值);
$("h2").replaceWith("<h3>太亮</h3>");
// replaceAll是替换$(要替换的值).replaceWith(被替换的值);
$("<p>哈哈哈</p>").replaceAll("h3");
$('button').click(function(event){
alert(2);
})
// 相当于删除了整个节点 事件 全都不保留;
// var jqbtn=$("button").remove();
// console.log(jqbtn);
// $(".father").append(jqbtn);
// 相当于删除了节点 事件保留;
var $btn=$("button").detach();
$(".father").append($btn);
// 清空
$("ul").empty();
})
</script>
</html>
4.事件 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.child{
width:200px;
height:200px;
background-color:red;
display:none;
}
</style>
</head>
<body style="height:1000px;">
<div style="width:200px;height:200px;border:1px solid red;">
<button>按钮</button>
<div class="child">
<a href="javascript:void(0);">热门</a>
<a href="javascript:void(0);" class="slideUp">收起</a>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
$("button").click(function(event){
// 阻止冒泡
event.stopPropagation();
$(".child").stop().slideDown(500);
});
$(".child").click(function(event){
return false;
});
// $(".child a").click(function(event){
// return false;
// })
$(".slideUp").click(function(event){
$(".child").stop().slideUp(500);
return false;
})
$("body").click(function(event){
$(".child").stop().slideUp(500);
})
</script>
</html>
代码知识点 : 模块的引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这里引用的两个js文件,
<script src="module.js"></script>
<script src="module2.js"></script>
<script>
// console.log(a);
// console.log(obj.fav());
// console.log(add(1,2));
// var al = new Animal("太亮");
// al.showName();
// al.showName();
console.log($);
console.log($1);
</script>
</body>
</html>
二级菜单:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.wrap{
width:330px;
height:30px;
margin:100px auto 0;
padding-left:10px;
background-color:pink;
}
.wrap li{
background-color:green;
}
.wrap>ul>li{
float:left;
margin-right:10px;
position:relative;
}
.wrap a{
display:block;
height:30px;
width:100px;
line-height:30px;
text-align:center;
}
.wrap>ul>li>ul{
display:none;
}
</style>
<script src="jquery.js"></script>
<script>
// 入口函数
$(document).ready(function(){
// 需求:鼠标放入一级li中,让他里面的ul显示.移开隐藏.
var jqli=$(".wrap>ul>li");
// 绑定事件(和mouseover功能一样)
// jqli.mouseenter(function(){
jqli.mouseover(function(){
$(this).children("ul").stop().slideDown(1000);
});
// 绑定事件(移开隐藏)(和mouseout功能一样)
// jqli.mouseleave(function(){
jqli.mouseout(function(){
$(this).children("ul").stop().slideUp(1000);
})
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单0</a>
<ul>
<li><a href="javascript:void(0)">一级菜单1</a></li>
<li><a href="javascript:void(0)">一级菜单2</a></li>
<li><a href="javascript:void(0)">一级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">二级菜单0</a>
<ul>
<li><a href="javascript:void(0)">二级菜单1</a></li>
<li><a href="javascript:void(0)">二级菜单2</a></li>
<li><a href="javascript:void(0)">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">三级菜单0</a>
<ul>
<li><a href="javascript:void(0)">三级菜单1</a></li>
<li><a href="javascript:void(0)">三级菜单2</a></li>
<li><a href="javascript:void(0)">三级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
小米案例 :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.box{
width:960px;
/*height:60px;*/
overflow:hidden;
margin:0 auto;
border:1px solid green;
}
.box ul li{
float:left;
/*width:160px;*/
/*height:60px;*/
line-height:60px;
text-align:center;
}
.box ul li a{
text-decoration:none;
display:block;
width:40px;
height:60px;
padding:0 60px;
background-color:yellow;
}
.box .show{
width:100%;
height:200px;
position:absolute;
/**/
top:60px;
left:0;
border:1px solid #666;
display:none;
box-shadow:0 0 5px #777;
}
.box .show.active{
display:block;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
// 控制当鼠标第一次呼入的动画效果
var animated=false;
$(".box>ul>li>a").mouseenter(function(ev){
// 下面代码鼠标第一次滑入a标签的动画效果
if(!animated){
animated=true;
var jQa=$(this);
jQa.css("color","#F52809");
// next()表示当前标签的紧挨着的兄弟标签
$(this).next("div").stop().slideDown(600);
}else{
var jQa=$(this);
// 修改a标签的样式
jQa.css("color","#F52809").parent("li").siblings("li").children("a").css("color","black");
jQa.next("div").stop().show().parent("li").siblings("li").children(".show").stop().hide();
}
});
// 鼠标进入到下方区域,保持不变
$(".show").mouseenter(function(ev){
$(this).stop().show();
})
// 鼠标离开下方区域
$(".show").mouseleave(function(ev){
$(this).stop().slideUp(300);
animated=false;
})
// 鼠标离开导航栏列表
$(".box").mouseleave(function(ev){
console.log($(ev.target));
$(ev.target).next("div").stop().slideUp(300);
animated=false;
})
})
</script>
</head>
<body>
<div class="box">
<ul>
<li>
<a href="">小米手机</a>
<div class="show">
<div class="container">
张三
</div>
</div>
</li>
<li>
<a href="#">小米手机</a>
<div class="show">
<div class="container">
李四
</div>
</div>
</li>
<li>
<a href="#">小米手机</a>
<div class="show">
<div class="container">
王五
</div>
</div>
</li>
<li>
<a href="#">小米手机</a>
<div class="show">
<div class="container">
赵六
</div>
</div>
</li>
<li>
<a href="#">小米手机</a>
<div class="show">
<div class="container">
麻七
</div>
</div>
</li>
<li>
<a href="#;">小米手机</a>
<div class="show">
<div class="container">
娃哈哈
</div>
</div>
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
</script>
</body>
</html>