jQuery(jQ)
html+css+js
1 jQ是一个js库,封装了大量的特定的集合(函数和方法)
如animate()、css()、show()等
2 使用jQ大大提高开发效率,简化dom操作
常见的js库 jQuery YUI Dojo ExtJs zepto
- jQuery选择器 $(selector) 筛选方法 parent() $(“li”).parent() children(selector) $(“ul”).children(“li”)
find(selector) $(“ul”).find(‘p’) siblings(selector)
$(“div”).siblings(“li”) nextAll() prevAll() eq(index)
$(“li”).eq(2) === $(“li:eq(2)”) - jQuery处理样式 css() addClass()/removeClass()/toggleClass()/hasClass()
- jQuery动画效果 显示与隐藏 show()/hide()/toggle() 滑动
slideDown()/slideUp()/slideToggle() 淡入淡出
fadeIn()/fadeOut()/fadeToggle()/fadeTo() animate()
- $(selector) 筛选方法 parent() $(“li”).parent()
children(selector) $(“ul”).children(“li”) find(selector)
$(“ul”).find(‘p’) siblings(selector) $(“div”).siblings(“li”)
nextAll() prevAll() eq(index) $(“li”).eq(2) ===
$(“li:eq(2)”)
<ul>
<li class="first">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5
<div>
div
</div>
</li>
</ul>
<ol>
<li>ol item1</li>
<li>ol item2</li>
<li>ol item3</li>
<li>ol item4</li>
<li>ol item5</li>
</ol>
<script src="./jquery.min.js"></script>
<script>
$(function() {
console.log($(".first").parent());
$('.first').siblings('li').css('fontSize','18px');
//$("ul li:eq(2)").css('color','red');
$("ul li").eq(2).css('color','red');
var txt = $("ul").children('div').html();
console.log(txt);
});
</script>
DOM对象转jQuery对象 $(DOM对象)
console.log($(box).html());
jQuery对象转DOM对象
$("div")[index] 或$('div').get(index)
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">123456</div>
<script src="jquery.min.js"></script>
<script>
// window.onload = function() {}
//$(".box").hide(2000);
/* 入口函数 等页面DOM加载完毕再去执行代码 相当于原生js的DOMContentLoaded
$(document).ready(function() {
$(".box").hide(2000);
});
*/
// DOM对象
var box = document.querySelector('.box');
var $box = $('.box'); // jQuery对象
console.log(box.innerHTML);
console.log(box);
console.log($box);
// DOM对象转jQuery对象 $(DOM对象)
console.log($(box).html());
// jQuery对象转DOM对象 $("div")[index] 或$('div').get(index)
console.log($box[0].innerHTML,$box.get(0).innerHTML);
$(function() {
$(".box").hide(2000);
});
// $ === jQuery
// $ 是顶级对象
</script>
- 原生js，className改变会覆盖，而JQuery的AddClass是追加
<style>
.current {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li class="first demo">item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5
<div>
div
</div>
</li>
</ul>
<ol>
<li>ol item1</li>
<li class="test">ol item2</li>
<li>ol item3</li>
<li>ol item4</li>
<li>ol item5</li>
</ol>
<script src="./jquery.min.js"></script>
<script>
$(function() {
// 设置样式
$('.first').css('width','400px');
$('.first').css('height',400);
$('.first').css('background','blue');
//alert($('.first').css('width')); // '400px'
// 一次设置多个样式
$('.first').css({
width: 300,
height: 300,
fontSize: 20
});
$('ol li:eq(1)').addClass('current');
$(".first").removeClass('demo');
// click() 注册单击事件
$('ol li:eq(1)').click(function() {
//$(this).toggleClass('current');
if ($(this).hasClass('current')) {
$(this).removeClass('current');
} else {
$(this).addClass('current');
}
});
});
</script>
- $(this) dom对象转换为JQuery对象
<style>
* {
padding: 0;
margin: 0;
}
.container {
margin: 100px;
}
ul {
list-style: none;
}
.nav > li {
float: left;
width: 120px;
text-align: center;
}
.nav ul {
display: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav">
<li>新闻
<ul>
<li>热点新闻</li>
<li>媒体报道</li>
<li>经济之声</li>
</ul>
</li>
<li>产品
<ul>
<li>产品A</li>
<li>产品B</li>
<li>产品C</li>
</ul>
</li>
</ul>
</div>
<script src="./jquery.min.js"></script>
<script>
$(function() {
/*
$(".nav").children('li').mouseenter(function() {
$(this).children('ul').stop().slideDown(500);
});
$(".nav").children('li').mouseout(function() {
$(this).children('ul').stop().slideUp(500);
});
*/
// hover() 事件切换 鼠标经过和鼠标离开的复合写法
//stop解决短时间放上去，把之前的动画停掉
$('.nav').children('li').hover(function() {
$(this).children('ul').stop().slideDown(500);
},function() {
$(this).children('ul').stop().slideUp(500);
});
});
</script>
- 动画效果
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<div class="box"></div>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<button>滑入</button>
<button>滑出</button>
<button>滑入滑出切换</button>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>淡入到具体的透明度</button>
<button>自定义动画</button>
<script src="./jquery.min.js"></script>
<script>
$(function() {
$('button:eq(0)').click(function() {
// show(speed,easing,cb)
//$('.box').show();
//$('.box').show(1000); // 1000毫秒
$('.box').show('fast',function() {
alert('元素显示完毕');
}); // fast slow normal
});
$('button:eq(1)').click(function() {
$('.box').hide();
});
$('button:eq(2)').click(function() {
$('.box').toggle(1000);
});
$('button:eq(3)').click(function() {
$('.box').slideDown(1000);
});
$('button:eq(4)').click(function() {
$('.box').slideUp(1000);
});
$('button:eq(5)').click(function() {
$('.box').slideToggle(1000);
});
$('button:eq(6)').click(function() {
$('.box').fadeIn(1000);
});
$('button:eq(7)').click(function() {
$('.box').fadeOut(1000);
});
$('button:eq(8)').click(function() {
$('.box').fadeToggle(1000);
});
$('button:eq(9)').click(function() {
$('.box').fadeTo(400,0.8);
});
$('button:last').click(function() {
$(".box").animate({
left: 400,
top: 400,
opacity: .5,
//backgroundColor: 'red'
},500);
});
});
</script>
