进阶14-jQuery
2017-10-23 本文已影响0人
饥人谷_星璇
题目1： jQuery 能做什么？
- jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax操作更加简单。
- 功能主要为：
1.获取DOM元素。
2.设置、修改、添加、删除DOM元素。
3.设置元素的属性。
4.修改元素的CSS属性。
5.响应用户页面的AJAX功能 - 与平常使用JS来操作相比，使用jQuery操作会更加简单方便。
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- Dom 对象指的是普通的 JavaScript 对象，而jQuery对象则是使用jQuery包装 Dom 对象后产生的对象。jQuery对象可以使用jQuery的方法，不能使用DOM方法，而DOM对象也是只能使用DOM方法，不能使用jQuery的方法。
- DOM对象转化为jQuery对象：使用$()将DOM对象包裹起来就可以得到一个jQuery对象。
- jQuery对象转化为DOM对象：
1.使用jQuery提供的.get(index)方法。
2.使用[index]方法，因为jQuery对象是一个类数组，可以使用数组的功能
var $a = $('.a') //jQuery对象
var a = $a.get(0) //DOM对象
var b = $a[0] // DOM对象
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- jQuery中绑定事件首选.on(events [,selector ] [,data ], handler(eventObject) )方法。
- bind(type,[data],fn)的作用是为每个匹配元素的特定事件绑定事件处理函数。
- unbind(),bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
$("p").bind("click", function(){
alert( $(this).text() );
}); //当每个段落被点击的时候，弹出其文本。
$("p").unbind( "click" )//将段落的click事件取消绑定
- delegate(selector,[type],[data],fn),指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
<div style="background-color:red">
<p>这是一个段落。</p>
<button>点我</button>
</div>
<script>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
</script> //当点击按钮时，隐藏或显示 p 元素：
- live(type, [data], fn),这个方法提供了一种手段，将委托的事件处理程序附加到一个页面的document元素，从而简化了在页面上动态添加的内容上事件处理的使用。
<body>
<div class="clickme">Click here</div>
<script>
$('.clickme').live('click', function() {
alert("Live handler called.");
});
$('body').append('<div class="clickme">Another target</div>');//如果是使用bind()来添加点击事件，这里添加的div虽然class也是clickme,但是因为是在绑定事件执行之后才添加的，所以并不会有绑定事件，但是使用live的话不会出现这种问题。
</script>
</body>
- .on( events [,selector ] [,data ], handler(eventObject) ),在选择元素上绑定一个或多个事件的事件处理函数。：
1.events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
2.selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
3.data：当一个事件被触发时，要传递给事件处理函数的event.data
4.handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false - .off( events [, selector ] [, handler ] ),移除一个事件处理函数
$("p").on("click", function(){
alert( $(this).text() );
}); //文档被点击时弹出其中的文档。
$("p").off("click")//移除文档的点击事件。
- 绝大部分情况下推荐使用on方法。
题目4：jQuery 如何展示/隐藏元素？
- 展示元素：.show()功能可以将隐藏的元素显现出来。
- 隐藏元素：.hide()功能可以将元素隐藏。
题目5： jQuery 动画如何使用？
- jQuery 动画的使用需要将元素从一个状态到另一个状态之间的过渡效果显示出来。
- 基础：
1.hide([duration ] [,easing ] [,complete ])，用于隐藏元素，没有参数的时候等同于直接设置display属性
2.show( [duration ] [, easing ] [, complete ] )用于显示元素，用法和hide类似
3.toggle( [duration ] [, easing ] [, complete ] )用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似 - 渐变：
1.fadeIn( [duration ] [, easing ] [, complete ] )通过淡入的方式显示匹配元素
2.fadeOut( [duration ] [, easing ] [, complete ] )通过淡出的方式隐藏匹配元素
3.fadeTo( duration, opacity [, easing ] [, complete ] )调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
4.fadeToggle( [duration ] [, easing ] [, complete ] )通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。 - 滑动：
1.slideDown( [duration ] [, easing ] [, complete ] )用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
2.slideUp( [duration ] [, easing ] [, complete ] )用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
3.slideToggle( [duration ] [, easing ] [, complete ] )用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- .html()可以获取元素内部HTML内容,如果向里面传参的话便是设置内部HTML内容。
- .text()可以获取元素内部Text内容,如果向里面传参的话便是设置内部Text内容。
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- .var()可以获取表单内部用户输入的内容，如果传参，则是设置内容。
- .attr(attributeName,value)可以获取表单内部相应的属性，如果第二个参数传参，则是设置属性。
