1： jQuery 能做什么？
- 选择网页元素
- 改变结果集
- 元素的操作：取值和赋值
- 元素的操作：移动
- 元素的操作：复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果（动画效果）
- AJAX
2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- jQuery 对象转化成DOM 原生对象：可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，如：
$('wrap')[0]，即实现将jQuery 对象转化DOM 原生对象。 - DOM 原生对象转化jQuery 对象：用
$()包裹DOM对象，如：$(DOM对象)即可实现DOM 原生对象转化成jQuery 对象。
3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- bind：为每个匹配元素的特定事件绑定事件处理函数。（jQuery 3.0中已弃用此方法）
//当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
- unbind：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。如果没有参数，则删除所有绑定的事件。如果提供了事件类型作为参数，则只删除该类型的绑定事件。（jQuery 3.0中已弃用此方法）
//把所有段落的所有事件取消绑定
$("p").unbind()
- delegate：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。（jQuery 3.0中已弃用此方法）
//当点击鼠标时，隐藏或显示 p 元素：
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
<scirpt>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
</scirpt>
- live：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
//把所有段落的所有事件取消绑定
<body>
<div class="clickme">Click here</div>
</body>
<scirpt>
$('.clickme').live('click', function() {
alert("Live handler called.");
});
</scirpt>
//然后再添加一个新元素：
$('body').append('<div class="clickme">Another target</div>');
//然后再点击新增的元素，他依然能够触发事件处理函数。
- on：在选择元素上绑定一个或多个事件的事件处理函数。
//当每个段落被点击的时候，弹出其文本。
$("p").on("click", function(){
alert( $(this).text() );
});
- off：on()的反向操作在选择元素上移除一个或多个事件的事件处理函数。与on相反。
//把所有段落的所有事件取消绑定。
$("p").off()
推荐使用on()和off()，在jQuery 1.7版本后统一了事件绑定方法，即on()和off()。
使用on绑定事件使用事件代理的写法：
//html代码
<ul>
<li></li>
<li></li>
<li></li>
</ul>
//对ul元素绑定事件代理
$('ul').on('click', 'li', function(){*****})
4：jQuery 如何展示/隐藏元素？
- jQuery 展示元素的方法：.hide()
$('.target').hide()；
- jQuery 隐藏元素的方法：.show()
$('.target').show()；
5： jQuery 动画如何使用？
jQuery提供的基础动画方法有：
-
.hide()：用于隐藏元素，没有参数的时候等同于直接设置display属性
-
.show()：用于显示元素，用法和hide类似
-
.toggle()：用来切换元素的隐藏、显示
-
.fadeIn()：通过淡入的方式显示匹配元素
-
.fadeOut()：通过淡出的方式隐藏匹配元素
-
.fadeTo()：调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
-
.fadeToggle()：通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
-
.slideDown()：用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
-
.slideUp()：用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
-
.slideToggle()：用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
-
以上方法不能满足动画效果时，可使用自定义动画方法.animate()
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.，而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
//点击按钮后div元素的几个不同属性一同变化
//Html代码
<button id="go"> Run</button>
<div id="block">Hello!</div>
//jQuery代码
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 设置和获取元素内部 HTML 内容:：.html([string])方法
这是一个读写两用的方法，用于获取/修改元素的innerHTML- 当没有传递参数的时候，返回元素的innerHTML
- 当传递了一个string参数的时候，修改元素的innerHTML为参数值
$('div').html()
$('div').html('123')
- 设置和获取元素内部文本：.text()方法
这是一个读写两用的方法，用于获取/修改元素的iinnerText- 当没有传递参数的时候，返回元素的innerText
- 当传递了一个string参数的时候，修改元素的innerText为参数值
$('div').text()
$('div').text('123')
7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 设置和获取表单用户输入或者选择的内容：.val([value])方法。
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
$('input').val()
$('input').val('newValue');
- 设置和获取元素属性：.attr()方法
- 获取元素属性
$( "div" ).attr( "id" );
- 设置元素属性
- 为元素属性赋值
$( "#div" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
- 为匹配的元素集合中的每个元素中移除一个属性
$('div').removeAttr('id');
8： 使用 jQuery实现如下效果
demo
9：使用 jQuery 实现如下效果
demo
10：实现如下效果
Ps:当点击按钮时使用如下数据
var products = [ { img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金手 猴哥款', price: '￥405.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金转运珠 猴哥款', price: '￥100.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金手链 3D猴哥款', price: '￥45.00' }];
网友评论