jQuery入门

2016-07-12 本文已影响0人爱上帘外修竹

问答

1. 说说库和框架的区别？

库是将代码集合成的一个产品，面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库叫函数库。
框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。框架是库的升级版。
开发者在使用框架的时候，必须使用这个框架的全部代码。

2. jquery 能做什么？

1.方便快捷获取DOM元素
　　如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：
$('div.content').find('p');
2.动态修改页面样式
　　使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：
$('ul > li:first').addClass('active');
3.动态改变DOM内容
　　使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"Container"的元素添加一个链接：
$('#container').append('<a href="more.html">more</a>');
4.响应用户的交互操作
　　jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

$('button.show-details').click(function() {
   $('div.details').show();3 });

上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。
5.为页面添加动态效果
　　jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。

$(function () {
   $("#btnShow").click(function () {
     $("#msubject").hide("slow");
     });
 });

6.统一Ajax操作
　　jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。

 function (data, type) {
 // 对Ajax返回的原始数据进行预处理
 return data
 // 返回处理后的数据
 }

7.简化常见的JavaScript任务。
　　除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。

  total += value;
});```
#####3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
jquery 对象是将原生DOM对象经过包装后的对象，可以使用jQuery专属方法，是一个数组对象
jQuery可使用数组方法转原生:`jQuery[i]`
原生转jQuery：`$(原生)`
#####4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

$(".click").click(function(){
console.log( $(this) );
})
$(".click").bind("click",function(){
console.log(this);
})
$(".click").on(“click”,function(e){
console.log(e.target)
})
$(".click").parents("ct").on(“click”,".click",function(e){
console.log(e.target)
}) //事件代理

\*bind 为元素添加一个绑定事件
\*unbind 解除一个元素绑定事件 
\*delegate 相当于事件代理（可指定元素）为元素添加一个或多个绑定事件
\*live 相当于使用了事件代理（对于根节点），为元素添加一个或多个绑定事件
\*on 在被选元素及子元素上添加一个或多个事件处理程序 （最建议使用的方法）
\*off 是用来移除.on()方法添加的事件处理程序
#####5.jquery 如何展示/隐藏元素？

$(".show").show([duration ] [,easing ] [,complete ])
//duration：动画持续多久
//easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
//complete：在动画完成时执行的函数
$(".hide").hide([duration ] [,easing ] [,complete ])

$(".switch").toggle( [duration ] [,easing ] [,complete ] )
//用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

$(".move").fadeIn( [duration ] [, easing ] [, complete ] )
//淡入
$(".move").fadeOut( [duration ] [, easing ] [, complete ] )
//淡出

$("xxx").fadeTo( duration, opacity [, easing ] [, complete ] )
//调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
$("xxx").fadeToggle( [duration ] [, easing ] [, complete ] )
//通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

$("xxx").slideDown( [duration ] [, easing ] [, complete ] )
//用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
$("xxx").slideUp( [duration ] [, easing ] [, complete ] )
//用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
$("xxx").slideToggle( [duration ] [, easing ] [, complete ] )
//用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

#####6.jquery 动画如何使用？

$("xxx").animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一个CSS属性和值的对象,动画将根据这组对象移动。

例如：

$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});

停止：

$("xxx").stop( [clearQueue ] [, jumpToEnd ] )

如：

$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});

#####7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
获取元素内部HTML：`$("xxx").html()`
获取元素内部内部文本：`$("xxx").text()`
上述括号内无内容代表获取，有内容代表设置。
#####8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
设置或者获取表单用户输入内容`$('#input').val()`
设置或者获取表单选择内容`$('input:checked')或$(':checked')`
设置或者获取元素属性`$("div").attr(e,d)`
e代表获取，d代表需要设置的属性，为空时代表获取
获取带有某个属性的元素`$('[data-img]')`或者`$('[data-img="xxx“]')`
###代码
[预览1](http://book.jirengu.com/jirengu-inc/jrg-renwu3/homework/%E8%81%82%E6%94%BF/25/task25-1/task25-1.html)
[预览2](http://book.jirengu.com/jirengu-inc/jrg-renwu3/homework/%E8%81%82%E6%94%BF/25/task25-2/task25-2.html)
[预览3](http://book.jirengu.com/jirengu-inc/jrg-renwu3/homework/%E8%81%82%E6%94%BF/25/task25-3/task25-3.html)
#####1. 使用 jquery实现如下效果
![](https://img.haomeiwen.com/i2304286/1b01c2831a105992.gif?imageMogr2/auto-orient/strip)
[github](https://github.com/jirengu-inc/jrg-renwu3/blob/master/homework/%E8%81%82%E6%94%BF/25/task25-1/task25-1.html)
代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task25-1</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
#nav{
position: relative;
left: 20px;
top: 20px;
}
#nav>ul{
float: left;
}
#nav>ul li{
list-style: none;
}
.clear:after{
content: "";
display: block;
clear: both;
}
.firstNav{
float: left;
width: 200px;
color: white;
background: #de272e;
padding: 10px 5px 10px 20px;
border-bottom: 1px solid #ccc ;
}
.firstNav a{
font-family: "宋体";
font-size: 18px;
text-decoration: none;
color: white;
padding-right: 100px;
}
.firstNav div{
display: inline-block;
}
.secondNav{
border: 1px solid #ccc;
}
.secondNav a{
display: inline-block;
font-size: 14px;
text-decoration: none;
color: black;
margin: 10px 70px 10px 10px;
}
.secondNav:nth-of-type(2){
position: relative;
top: 38px;
}
.secondNav:nth-of-type(3){
position: relative;
top: 76px;
}
.secondNav:nth-of-type(4){
position: relative;
top: 116px;
}.secondNav:nth-of-type(5){
position: relative;
top: 152px;
}
</style>
</head>
<body>
<div id="nav">
<ul class="firstNavCt">
<li class="clear">
<div class="firstNav">
<a href="#">珠宝玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠宝玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠宝玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠宝玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠宝玉器</a>
<div>></div>
</div>
</li>
</ul>
<ul class="secondNavCt">
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">宝石</a>
<a href="#">水晶</a>
</li>
<li>
<a href="#">玛瑙</a>
<a href="#">珍珠</a>
</li>
<li>
<a href="#">钻石</a>
<a href="#">琥珀</a>
</li>
<li>
<a href="#">和田</a>
<a href="#">琥珀</a>
</li>
</ul>
</div>
</li>
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">宝石</a>
<a href="#">水晶</a>
</li>
<li>
<a href="#">玛瑙</a>
<a href="#">珍珠</a>
</li>
<li>
<a href="#">钻石</a>
<a href="#">琥珀</a>
</li>
</ul>
</div>
</li>
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">宝石</a>
<a href="#">水晶</a>
</li>
<li>
<a href="#">玛瑙</a>
<a href="#">珍珠</a>
</li>
</ul>
</div>
</li>
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">宝石</a>
<a href="#">水晶</a>
</li>
</ul>
</div>
</li>
<li class="secondNav"></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
$(".secondNav").hide();
$(".firstNav").on("mouseenter",function(e){
var index = $(".firstNav").index(this);
$(".secondNav").eq(index).show();
})
$(".firstNav").on("mouseleave",function(e){
var index = $(".firstNav").index(this);
console.log(this);
$(".secondNav").eq(index).hide();
})
</script>
</body>
</html>

#####2. 使用 jquery 实现如下效果
![](https://img.haomeiwen.com/i2304286/a41dddb87b877e71.gif?imageMogr2/auto-orient/strip)
[github](https://github.com/jirengu-inc/jrg-renwu3/blob/master/homework/%E8%81%82%E6%94%BF/25/task25-2/task25-2.html)
代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task25-2</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.clear:after{
content: "";
display: block;
clear: both;
}
li{
list-style: none;
color: black;
}
.ct{
margin: 20px 0 0 20px;
}
.nav{
width: 189px;
heigth: 20px;
border: 1px solid #ccc;
padding: 0;
}
.nav>li{
float: left;
height: 14px;
text-align: right;
padding: 12px 0px 12px 0px;
}
.nav>li>a{
text-decoration: none;
font-size: 14px;
color: black;
padding:0px 10px 0px 10px;
border-right: 0.5px solid #ccc;
}
.goods-ct>li{
width: 676px;
border: 1px solid #ccc;
float: left;
}
.marginF{
margin-left: -20px;
margin-bottom: -20px;
/border: 1px solid red;/
}
.goods{
font-family: "Arial", "Verdana", "宋体";
text-align: center;
font-size: 14px;
width: 210px;
height: 210px;
border: 0.5px solid #eee;
margin-left: 20px;
margin-bottom: 20px;
float: left;
}
.price{
color: #f00;
}
.background{
background: #ccc;
}
.cover{
position: relative;
top: -217px;
background: #ccc;
width: 210px;
height: 210px;
border: 0.5px solid #ccc;
margin-right: 20px;
margin-bottom: 20px;
float: left;
opacity: 0;
}
.more{
text-decoration: none;
display: block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
color: red;
border: 1px solid red;
border-radius: 10px;
margin: 100px auto;
background: #fff;
}
</style>
</head>
<body>
<div class="ct">
<ul class="nav clear">
<li>
<a href="#">热门</a>
</li>
<li>
<a href="#">珠宝首饰</a>
</li>
<li>
<a href="#">奢侈品</a>
</li>
</ul>
<ul class="goods-ct clear">
<li>
<ul class="marginF clear">
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥1699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥2349.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥18999.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥169900.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
</ul>
</li>
<li>
<ul class="marginF clear">
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥2699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥1659.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥69559.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥999.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥16553230.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="ct">
<ul class="nav clear">
<li>
<a href="#">热门</a>
</li>
<li>
<a href="#">珠宝首饰</a>
</li>
<li>
<a href="#">奢侈品</a>
</li>
</ul>
<ul class="goods-ct clear">
<li>
<ul class="marginF clear">
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥999.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="description">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥16553230.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
$(".goods-ct>li").eq(1).hide();
$(".goods-ct>li").eq(2).hide();
$(".goods-ct>li").eq(4).hide();
$(".goods-ct>li").eq(5).hide();
$(".nav>li").on("click",function(e){
e.preventDefault();
$(this).siblings().removeClass("background")
$(this).addClass("background")
$(this).parents(".nav").find("a").css({'color':'black'})
$(this).find("a").css({'color':'red'})
var index = $(this).parents(".nav").children("li").index(this);
$(this).parents(".ct").find(".goods-ct>li").eq(index).show();
$(this).parents(".ct").find(".goods-ct>li").eq(index).siblings().hide();
})
$(".goods").on("mouseenter",function(e){
$(this).find(".cover").css({opacity: 0.5});
})
$(".goods").on("mouseleave",function(e){
$(this).find(".cover").css({opacity: 0});
})
</script>
</html>

#####3. 实现如下效果
![](https://img.haomeiwen.com/i2304286/37fd046198f7ad20.gif?imageMogr2/auto-orient/strip)
[github](https://github.com/jirengu-inc/jrg-renwu3/blob/master/homework/%E8%81%82%E6%94%BF/25/task25-3/task25-3.html)
代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task25-3</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.clear:after{
content: "";
display: block;
clear: both;
}
li{
list-style: none;
color: black;
}
.ct{
margin: 20px 0 0 20px;
}
.nav{
padding: 0;
}
.goods-ct>li{
width: 676px;
border: 1px solid #ccc;
float: left;
}
.marginF{
margin-left: -20px;
margin-bottom: -20px;
}
.goods{
font-family: "Arial", "Verdana", "宋体";
text-align: center;
font-size: 14px;
width: 210px;
height: 210px;
border: 0.5px solid #eee;
margin-left: 20px;
margin-bottom: 20px;
float: left;
}
.price{
color: #f00;
}
.background{
background: #ccc;
}
.cover{
position: relative;
top: -224px;
background: #ccc;
width: 210px;
height: 210px;
border: 0.5px solid #ccc;
margin-right: 20px;
margin-bottom: 20px;
float: left;
opacity: 0;
}
.more{
text-decoration: none;
display: block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
color: red;
border: 1px solid red;
border-radius: 10px;
margin: 100px auto;
background: #fff;
}
.add{
width: 50px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 2px;
border: 1px solid #f00;
margin-top: 5px;
}
.add>a{
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="ct">
<div class="nav clear">
<h2>珠宝首饰</h2>
</div>
<ul class="goods-ct clear">
<li>
<ul class="marginF clear">
<li class="goods">

<p class="name">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥1699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="name">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥2349.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="name">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥699.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="name">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥18999.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
<li class="goods">

<p class="name">藏美千足金和田玉金镶玉路路通吊坠</p>
<p class="price">¥169900.00</p>
<div class="cover">
<a class="more" href="#">立即抢购</a>
</div>
</li>
</ul>
</li>
</ul>
<div class="add">
<a href="#">添加</a>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
var products = [
{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰黄金手猴哥款dfasdfasdfsdafasdfasdf',
price: '￥405.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰黄金转运珠猴哥款asdfasdfasdfasdfasdfadsfasdf',
price: '￥100.00'
},{
img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
name: '珂兰黄金手链 3D猴哥款asdfsdfasdfasdfdsf',
price: '￥45.00'
}
];
function getProdHtml(prod){
var html = '';
html += '<li class="prod">';
html += '<div class="cover"><a class="btn" href="">立即抢购</a></div>'
html += '<a href="#">'
html += '[站外图片上传中……(46)]'
html += '<div class="prod-name">'+prod.name+'</div>'
html += '<div class="prod-price">'+prod.price+'</div>'
html += '</a>'
html += '</li>';
return html;
}
$(".goods-ct>li").eq(1).hide();
$(".goods-ct>li").eq(2).hide();
var $addLi = $(".goods").eq(1).clone();
// $addLi.attr
$(".add").on("click",function(e){
console.log($(".goods"))
for(var i=0;i<3;i++){
var $addLi = $(".goods").eq(1).clone();
$addLi.find("img").attr("src",products[i].img)
$addLi.find(".name").html(products[i].name)
$addLi.find("price").html(products[i].price)
$(".goods-ct>li>ul").append($addLi);
}
})
$(".goods-ct").on("mouseenter",".goods",function(e){
$(this).find(".cover").css({opacity: 0.5});
})
$(".goods-ct").on("mouseleave",".goods",function(e){
$(this).find(".cover").css({opacity: 0});
})
</script>
</body>
</html>

本文版权归本人（帘外修竹）所有，转载须说明来源

jQuery入门

问答

1. 说说库和框架的区别？

2. jquery 能做什么？

猜你喜欢

热点阅读