2016-09-11

jQuery介绍及其DOM操作、事件

问答

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

库是一些方法的集合，避免定义重复功能的函数并具有一定的模式兼容性。类似于一个工具箱，里面有很多的工具，比如jQuery，可以很方便的调用里面的方法和函数，实现一些功能。
框架更应该是一种对开发者的规范，开发者按照框架的设计去实现以下功能或效果，并非简单的工具集的概念，框架可以提供相应的库或者基于库来实现，但是库一般不具备框架的规范性。比如bootstrap，提供了一种完整的规范和功能，我们在它的基础上进行调整。

2. jquery 能做什么？

jquery是一个轻量级的JS库，实现了各种方法的封装，既有良好的兼容性，方便简洁。
1.选取DOM元素并进行操作，css样式操作
2.表单的验证和ajax请求
3.丰富多样的选择器 $(“[data-value=2]”)选择data-value为2的元素，$(“div#intro .head”)选取 id=”intro”的元素中的所有class=”head”的元素
3.annimate动画，hide,fade,slide及toggle等各种效果，可以很简单的实现

3.jquery 对象和 DOM 原生对象有什么区别？如何转化？

区别：DOM对象是使用元素的js方法获取的html元素对象，使用jQuery库中选择器的方法选取的对象是jQuery对象，jQuery对象可以使用jQuery的各种方法，DOM 对象只能使用Javascript 固有的方法。

转化：使用$(selecter).action()的形式可以操作jQuery的方法，DOm对象前加$可以将DOM转化为jQuery；$()获取的是一个满足条件的所有元素的类数组，因此jQuery使用[index] 和 .get(index)方法可以转化为DOm。

var $ct = $(".ct"); //jQuery 对象
var ct = $ct [0]; //DOM 对象
var ct = $ct.get(0); //DOM 对象
var ct = $ct.eq(0);//获取jQuery对象
var ct = document.querySelector('.ct')//DOM对象
$(ct).addClass('.hover')//加$可直接用jQuery方法

4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

1
2
3

$("div").on("click",function(){
//todo...
})

一般使用on方法绑定一个事件。
作用
- bind为每个匹配元素的特定事件绑定事件处理函数。但只能针对已经存在的元素进行事件的设置，若是用js操作再添加同名新元素，不能自动绑定了
  - unbind：bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
  - delegate为每个匹配元素的子元素绑定事件处理函数，类似事件代理
  - live附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。监听器绑定到document上的，所以事件的处理得等待层层冒泡，直到冒泡到根节点才开始处理。jQuery1.7以后不再建议使用 .live() 方法。
  - on在选定的元素上绑定一个或多个事件处理函数，是上面三种方法的综合
  - offoff() 方法移除用.on()绑定的事件处理程序。
推荐使用on方法
使用on绑定事件。
- .on( events [,selector ] [,data ], handler(eventObject) )
- events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”
- selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
- data：当一个事件被触发时，要传递给事件处理函数的event.data
- handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

事件代理的写法：

$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});//当div 下面的任何一个span元素进行事件操作时，代理到div上

5.jquery 如何展示/隐藏元素？

$(selector).show();//显示
$(selector).hide();//隐藏
$(selector).css(‘display’,’none’)和$(selector).css(‘display’,’block’)也可以
6.jquery 动画如何使用？
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
多个动画放在一起会按顺序执行，它们会形成一个动画序列，可使用。clearQueue()、.finish()和.stop(true, true)方法清除
1
2
3
4
5
6
$("#btn16").on('click', function(){
$div3.animate({
width:'150px',
height: '150px',
}, 500);
});

7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

使用$(‘selector’).html()获取HTML 内容，$(‘selector’).html(value)设置HTML内容。

使用$(‘selector’).text()获取元素内部文本，$(‘selector’).text(value)设置文本内容。

$('p').on('click',function(){
    console.log($(this).html());
})//输出html
$("p").on('click',function(){
    console.log($(this).text());
})//输出text
$('p').on('click',function(){
   $(this).html('设置的是<a>html</a>');
})//设置html
$('p').on('click',function(){
   $(this).text('设置的是<a>text</a>');//设置里面内容为文本内容
})

8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

使用$(‘selector’).val()获取表单内容，$(‘selector’)..val(val)设置表单内容

使用$(‘selector’).attr(attributeName)获取元素属性，$(‘selector’).attr(attributeName,value)设置元素属性，$(‘selector’).removeAttr(attributeName)移除属性;

 <input id="ipt" type="text">
	 <button>获取表单内容</button>
	 <button>设置表单内容</button>
	 <button>获取表单属性</button>
	 <button>设置表单属性为textarea</button>


	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$("button").eq(0).on('click',function(){
		    console.log($("#ipt").val());
		})
		$("button").eq(1).on('click',function(){
		    $("#ipt").val('设置表单内容');
		})
		$("button").eq(2).on('click',function(){
		   console.log($("#ipt").attr('type'));
		})
		$("button").eq(3).on('click',function(){
		    $("#ipt").attr("type","textarea");
		})
</script>

代码

1.gitlab库链接
2.gitlab库链接
问题：点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决
- 是因为a链接的href=“#”表示跳转到当前页面，所以会跳到上面
- 解决办法，将#改成javascript:void(0)或者在js中阻止a标签跳转的默认事件e.preventDefault()
1. gitlab库链接

本文标题:jQuery介绍及其DOM操作、事件

文章作者:findmoon

发布时间:2016年09月11日 - 20时17分

最后更新:2016年12月07日 - 20时57分

原始链接://findmoon.github.io/index.html/2016/09/11/jQuery介绍及其DOM操作、事件/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

问答