共计 4020 个字符，预计需要花费 11 分钟才能阅读完成。
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');
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>
var box = document.querySelector('.box');
var $box = $('.box');
console.log(box.innerHTML);
console.log(box);
console.log($box);
console.log($(box).html());
console.log($box[0].innerHTML,$box.get(0).innerHTML);
$(function() {
$(".box").hide(2000);
});
/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');
$('.first').css({
width: 300,
height: 300,
fontSize: 20
});
$('ol li:eq(1)').addClass('current');
$(".first").removeClass('demo');
$('ol li:eq(1)').click(function() {
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').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() {
$('.box').show('fast',function() {
alert('元素显示完毕');
});
});
$('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,
},500);
});
});
/script>
原文地址: 关于 Jquery 基本内容一
正文完
