1、引入jQuery
1.从jQuery.com下载jquery库
2从CDN中载入jQuery
2、基本语法
基础语法：$(selector).action()
$定义jQuery
选择符(selector)“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作
举个栗子
<body>
<p>我是一个p元素</p>
<p>我是一个p元素</p>
<p>我是一个p元素</p>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
})
})
</script>
</body>
3.事件
1.常用事件方法
点击事件：单击、双击
获取焦点
鼠标的各种事件
2.绑定事件
<body>
<button id="clickMeBtn">btn</button>
<script>
$(document).ready(function(){
$("#clickMeBtn").bind("click",clickHandler)
});
function clickHandler(e){
console.log("clickHandler");
}
</script>
</body>
bind可以用on代替，bind的底层实现就是用on
3.解除绑定事件
<body>
<button id="clickMeBtn">btn</button>
<script>
$(document).ready(function(){
$("#clickMeBtn").bind("click",clickHandler)
$("#clickMeBtn").unbind("click",clickHandler)
});
function clickHandler(e){
console.log("clickHandler");
}
</script>
</body>
unbind可以用off代替
4.事件的目标
5.事件的冒泡
6.自定义事件
<button id="clickMeBtn">点我</button>
<script>
$(document).ready(function(){
$("#clickMeBtn").click(function(){
var e= jQuery.Event("myEvent");
$("#clickMeBtn").trigger(e);
});
$("#clickMeBtn").bind("myEvent",function(event){
console.log(event);
})
})
</script>
</body>
4.jQuery的HTML操作
1.jQuery捕获
<body>
<p id="text">this is a p<a>这是一个a标签</a></p>
<button id="#btn">btn</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("text"+$("#text").text());
})
})
</script>
</body>
<body>
<p id="text">this is a p<a>这是一个a标签</a></p>
<button id="#btn">btn</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("text"+$("#text").html());
})
})
</script>
</body>
html可以获取内部的子标签，text只能获取具体的内容
获取input的value值
<body>
<p id="text">this is a p<a>这是一个a标签</a></p>
<button id="#btn">btn</button>
<input type="text" id="inp" value="大家好">
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("text"+$("#inp").val());
})
})
</script>
</body>
获取属性
<body>
<p ><a href="http://www.baidu.com" id="aid"></a></p>
<button id="#btn">btn</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("text"+$("#aid").attr("href"));
})
})
</script>
</body>
2.jQuery设置
<body>
<p id="p1">hello world</p>
<button id="btn">点我1</button>
<p id="p2">hello world</p>
<button id="btn2">点我2</button>
<script>
$(document).ready(function(){
$("#btn2").click(function(){
$("#p1").text("点我你就变了哈哈哈哈")
});
$("#btn2").click(function(){}
$("#p1").html("<a>猜我变成什么样</a>")
});
})
</script>
</body>
3.jQuery添加元素
function appendText(){
html/jquery/Dom
var text1 = '<p>iwen</p>';
var text2 = $("<p></p>").text("ime");
var text3 = document.creteElement("p");
text3.innerHtml = "acely";
$("body").append(text1,text2,text3);
}
append在被选中元素的结尾插入内容
prepend在被选中元素的开头插入内容
before在被选中元素的之前插入内容
after在被选入元素之后插入内容
<body>
<p id="p1">hello world</p>
<button id="btn">btn</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#p1").append("这是我用append添加的内容");
})
$("#btn").click(function(){
$("#p1").prepend("这是我用prepend添加的内容");
})
$("#btn").click(function(){
$("#p1").before("这是我用before添加的内容");
})
$("#btn").click(function(){
$("#p1").after("这是我用after添加的内容");
})
})
4.jQuery删除元素
remove全部删除
empty删除里面的子元素
<body>
<div id="div" style="width: 200px;height: 200px;border: 1px solid black;background-color: #ededed">
hello
<p >hello world</p>
<p>hello</p>
</div>
<button id="btn">删除</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#div").remove();
});
});
</script>
<body>
<div id="div" style="width: 200px;height: 200px;border: 1px solid black;background-color: #ededed">
hello
<p >hello world</p>
<p>hello</p>
</div>
<button id="btn">删除</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#div").empty();
});
});
</script>
</body>
5.jQuery的效果
1.淡入淡出
fadeIn()淡入
<body>
<button id="in">fadein</button>
<div id="div1" style="width: 80px;height: 80px;background-color: aqua;display: none;"></div>
<div id="div2" style="width: 80px;height: 80px;background-color: red;display: none;"></div>
<div id="div3" style="width: 80px;height: 80px;background-color: green;display: none;"></div>
<script>
$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
})
})
</script>
</body>
fadeOut()淡出
<body>
<button id="out">fadeout</button>
<div id="div1" style="width: 80px;height: 80px;background-color: aqua;"></div>
<div id="div2" style="width: 80px;height: 80px;background-color: red;"></div>
<div id="div3" style="width: 80px;height: 80px;background-color: green;"></div>
<script>
$(document).ready(function(){
$("#out").on("click",function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
})
})
</script>
</body>
fadeTo()淡出的时候设置透明度
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">toggle</button>
<button id="to">to</button>
<div id="div1" style="width: 80px;height: 80px;background-color: aqua;display: none;"></div>
<div id="div2" style="width: 80px;height: 80px;background-color: red;display: none;"></div>
<div id="div3" style="width: 80px;height: 80px;background-color: green;display: none;"></div>
<script>
$(document).ready(function(){
$("#in").on("click",function(){
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function(){
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function(){
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").on("click",function(){
$("#div1").fadeTo(1000,0.5);
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0.3);
})
})
</script>
</body>
效果对比图
图片.png
图片.png
fadeToggle()相当于开关，既可淡入也可淡出
2.滑动
slideDown()滑出
slideToggle()既可以滑出也可以隐藏
slideUp()隐藏
<style>
#content,#flipshow,#fliphide,#fliptoggle{
padding:5px;
text-align: center;
background-color: #ece023;
border: solid 1px #ece099;
}
#content{
padding:50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="fliptoggle">同时操作</div>
<div id="content">hello world</div>
<script>
$(document).ready(function(){
$("#flipshow").click(function(){
$("#content").slideDown(1000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#fliptoggle").click(function(){
$("#content").slideToggle(1000);
});
})
</script>
</body>
3.回调
<body>
<button>隐藏</button>
<p>hello world hello world hello world hello world</p>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("动画结束，这个方法被回调")
})
})
})
</script>
4.隐藏与显示
toggle既可以控制显示也可以控制隐藏
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">可控制</button>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1000);
});
$("#toggle").click(function(){
$("p").toggle(1000);
})
})
</script>
</body>
6.jQuery的扩展
1.扩展
2.no Conflict
消除掉$对于jQuery的缩写
对于jQuery比较难拼写，可声明一个对象代替
<body>
<div>hello</div>
<button id="btn">btn</button>
<script>
var myjq = $.noConflict();
myjq(document).ready(function(){
myjq("#btn").on("click",function(){
myjq("div").text("new hello");
})
})
</script>
</body>
7.CSS操作与盒子模型
1.css操作
<body>
<div></div>
<script>
$(document).ready(function(){
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
})
</script>
</body>
另一种方式
<body>
<div></div>
<script>
$(document).ready(function(){
$("div").css({
width:"100px",
height:"100px",
background:"red"
})
})
</script>
</body>
可以通过addClass("类名")来设置css样式
removeClass("类名")移出掉之前的style样式
2.盒子模型
height() width()元素本身的高度，不包括margin boder padding
innerheight() innerwidth()包括元素本身加margin padding
outerHeight(true)整个盒子的全部高度
outerHeight()元素本身，内边距padding，边框boder
8.元素
1.元素的遍历
向上遍历：子级找到父级一直向上
parent()最近的一个父元素
parents()是指所有的父元素
parentUntil()指的是由p元素到div1这个区间
$("p").parentUntil("#div1").css({border:"3px solid red"})
向下遍历
children()可选参数只向下遍历一级针对它的儿子辈
find()必选参数，可以针对它的所有子元素
<style>
#div1{
width: 500px;
height: 200px;
border: 3px solid chocolate;
}
#div2{
width: 400px;
height: 150px;
margin-top: 10px;
margin-left: 10px;
border: 3px solid chocolate;
}
p{
margin-top: 10px;
margin-left: 10px;
width: 150px;
height: 80px;
border: 3px solid chocolate;
}
</style>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<p>
<a>
hello
</a>
</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#div1").children("#div2").css({border:"3px solid red"})
$("#div1").find("a").css({border:"3px solid red"})
})
</script>
</body>
同级遍历
sibings()除了h4其他同级的元素都被修改掉
$(document).ready(function(){
$("h4").siblings().css({
border:"3px solid red"
})
})
next()h4的下一个元素被修改
$(document).ready(function(){
$("h4").next().css({
border:"3px solid red"
})
})
nextAll()下面所有的元素都被修改
nextUntil()h4到h6的区间（向下）
$(document).ready(function(){
$("h4").nextUntil("h6").css({
border:"3px solid red"
})
})
prev()上一个元素被修改
prevAll()向上的所有元素被修改
prevUntil()区间
2.元素的过滤
first()寻找同样元素的第一个
last()最后一个
eq(id)返回当前元素的索引id
filter(“标准”)满足这个集合的所有元素
net(“标准”)不满足这个集合的所有元素
网友评论