目录
jQuery简介
jQuery语法
jQuery加载模式
jQurey选择器
元素选择
文本内容插入
获取输入框的值
设置属性
CSS样式的操作
设置class属性
class切换
节点操作
事件的绑定
事件简写
事件对象
显示隐藏动画
上卷下拉动画
淡入淡出动画
jQuery简介
jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
使用之前需要先安装jQuery库文件
jQuery语法
$(selector).action()
jQuery加载模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入JQuery库文件-->
<script src="js/jquery.js"></script>
<script>
/* window.onload = function() {
$('div').css('width','200px').css('height','200px').css('background','red');
}*/
//ready()等文档准备完成之后调用。
/* $(document).ready(function (){
$('div').css('width','200px').css('height','200px').css('background','red');
})*/
//简写方式
$(function (){
$('div').css('width','200px').css('height','200px').css('background','red');
})
</script>
</head>
<body>
<div></div>
</body>
</html>
原生DOM对象和jQuery对象互换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入JQuery库文件-->
<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">一个按钮</button>
<button id="btn1">一个按钮</button>
<button id="btn2">一个按钮</button>
</body>
<script>
//返回的是原生的DOM对象。你就调用原生JS提供的属性和方法，不能调用JQuery提供的属性和方法
var btnObj = document.getElementById('btn');
console.log(btnObj);
btnObj.style.backgroundColor = "red";
btnObj.style.color = 'white';
//返回的是JQuery对象
//JQuery对象 那么你调用JQuery提供的属性和方法，调用不了原生JS的属性和方法。
var obj = $('#btn');
console.log(obj);
obj.css('height', '200px');
obj.css('width', '200px');
//原生的DOM对象和JQuery对象的互换
// 原生的DOM对象--->JQuery对象 $(原生DOM对象)
$(btnObj).css('font-size', '50px');
// JQuery对象---->原生的DOM对象 调用JQuery对象提供的get()方法返回原生DOM对象
var ysDOM = obj.get(0);
ysDOM.style.border = '5px solid black';
</script>
</html>
jQurey选择器
1.id选择器
$("#test")
2.class选择器
$(".test"）
3.标签选择器
$(”h1“)
4.子元素
$("div div p")
$("#d1").find("#d2").find("p")
5.兄弟元素
$("h5").next()
$("h5").nextAll()
元素选择
1.第一个元素
$('li').first()
2.最后一个元素
$('li').last()
3.索引元素
$('li').eq(2)
文本内容插入
//原生js Jquery
//innerText text()
//innerHTML html()
$('div').html('<b>Hello</b>');
获取输入框的值
var value=$('input').val();
alert(value)
设置属性
$('#myh').attr('sb2','456');
CSS样式的操作
$('div').css('width','100px').css('height','100px').css('background-color','red');
$('div').css({"color":"white","border":"1px solid yellow"});
设置class属性
.bg{
background-color:red;
}
.bb{
font-size:50px;
}$('h1').attr('class','bg') //设置class属性可以用这个方法
$('h1').addClass('bg bb');
$('h1').removeClass('bb');
class切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery.js"></script>
</head>
<style>
.aa{
width: 200px;
height: 200px;
background: red;
}
.bb{
width: 300px;
height: 300px;
background: #41a1cb;
}
</style>
<body>
<div class="aa">
</div>
<script>
// var flag=true;
// $("div").click(function () {
// $("div").removeClass();
// if(flag){
// $("div").addClass("bb");
// }else {
// $("div").addClass("aa");
// }
// flag=!flag;
// })
$("div").click(function() {
$(this).toggleClass("bb");
})
</script>
</body>
</html>节点操作
<div id="d1">
<h1>22222222222222222222</h1>
</div>
//把一个元素，移动到另一个元素里面的后面
var obj=$('<h2>后面</h2>');
$(obj).appendTo('#d1');
var obj2=$('<h3>前面</h3>');
$(obj2).prependTo('#d1');
var obj=$("<h1>1111111111</h1>");
//给这个元素后面添加一个兄弟元素
$('#d1').after(obj);
//给这个元素前面添加一个兄弟元素
var obj2=$("<h1>前面</h1>");
$('#d1').before(obj2);
//把h3移动到p标签的后面，这是兄弟关系的一段
$('h3').insertAfter('p');
// 给每一个h1套一个父标签div
$('h1').wrap('<div></div>');
//$('h1').unwrap(); 去掉父标签
//把所有的h2看做一个整体，套一个父标签div
$('h2').wrapAll('<div></div>');
//$('h2').unwrap(); 去掉父标签
//给内部的子标签套一个父标签
$('#d1').wrapInner('<div class="nei"></div>');事件的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn1">事件的绑定</button>
<button id="btn2">事件的绑定22</button>
</body>
<script>
/* $('button').on('click',function() {
alert('hehe');
})
$('button').on('mouseover',function() {
$(this).css('background','red');
})
*/
//多个事件可以链式绑定。
$('#btn1').on('click',function() {
alert('hehe');
}).on('mouseover',function() {
$(this).css('background','red');
})
//解绑事件，不传参，解绑所有事件
//$('#btn1').off();
//传参解绑对应的事件
//$('button').off('click');
//事件只执行一次
$('#btn2').one('click',function() {
alert('hehe');
})
</script>
</html>
事件简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
</head>
<body>
<button>一个按钮</button>
</body>
<script>
/*$('button').on('click',function() {
})*/
//对于常用事件，都有简写方式
$('button').click(function() {
}).mouseover(function() {
}).mouseout(function() {
})
//mouseover mouseout 合并成一个hover
$('button').hover(function() {
alert('处理移上')
},function() {
alert('处理移出')
})
</html>
事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
</head>
<body>
<a href="http://www.163.com">一个按钮</a>
<script>
//事件对象，event JQuery没有做任何处理，你在原生JS里面怎么用，在Jquery中还是怎么用
$('a').click(function(e) {
e.preventDefault();
alert("弹框");
});
</script>
</body>
</html>
显示隐藏动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js"></script>
<style>
div{
height:200px;
width: 200px;
background-color:red;
}
</style>
</head>
<body>
<div>
</div>
<button>显示</button>
<button>隐藏</button>
<button>开关</button>
<script>
$('button').eq(0).click(function() {
$('div').show(5000);
})
$('button').eq(1).click(function() {
$('div').hide(5000);
})
$('button').eq(2).click(function() {
$('div').toggle(5000);
})
</script>
</body>
</html>
上卷下拉动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<button type="button">上卷</button>
<button type="button">下拉</button>
<button type="button">切换</button>
</body>
<script type="text/javascript">
$('button').first().click(function(){
$('div').slideUp(1000);
})
$('button').eq(1).click(function(){
$('div').slideDown(1000);
})
$('button').last().click(function(){
$('div').slideToggle(1000)
})
</script>
</html>
淡入淡出动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background: red;
/*透明度调整
opacity: 1;
*/
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<button type="button">淡入</button>
<button type="button">淡出</button>
<button type="button">切换</button>
</body>
<script type="text/javascript">
$('button').first().click(function(){
$('div').fadeIn(1000);
})
$('button').eq(1).click(function(){
$('div').fadeOut(1000);
})
$('button').last().click(function(){
$('div').fadeToggle(1000);
})
</script>
</html>
