jquery DOM&事件

问答

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

• 库是封装好的一系列方法函数，方便重复使用，提供了很多API，类似于工具包

• 框架是一个已经搭建好的雏形，只需要往里面填东西就可以了

2.jquery 能做什么？

jQuery的宗旨是写得更少，做得更多，针对js代码封装了一些较为复杂的函数，解决了一些兼容问题。

• 强大的选择器

• 方便的操作DOM

• 较好的浏览器兼容性

• 方便的Ajax和事件操作

• 链式调用

• 方便的处理动画

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

• jquery对象是通过jquery选择器选择的，只能使用jquery的属性和方法。

• DOM 原生对象是通过通过原生js选择器选择的，只能使用原生js的属性和方法。

• dom->jquery，加$(dom)

• jquery->dom, jquery元素是以数组形式展现，选取数组的第几项就能转换为dom元素
  var $p1 = $('.p1'); var p1 = $p1[0]; //转换为dom元素

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

• bind():为一个元素绑定一个事件处理程序，一般用在jq1.7之前

<pre>$(".item").bind("click",function () { alert($(this).text());})</pre>

• unbind():从元素上删除一个以前绑定的事件处理程序，用在jq1.7以前
  <pre>
  $(".item").unbind()//删除所有事件类型的处理程序
  </pre>

• delegate():为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素,即事件代理
  <pre>
  $('#container').delegate('a', 'click', function() { alert("That tickles!") });
  </pre>

• live():附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
  <pre>
  $('a').live('click', function() { alert("That tickles!") });
  </pre>

• on():在选定的元素上绑定一个或多个事件处理函数。
  <pre>$('div').on('click', function(e){
  console.log(this);
  console.log(e);
  });</pre>

• off:移除一个事件处理函数
  <pre>
  $("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
  .find("#theone").text("Does nothing...");
  });

• 推荐使用on

• 使用on绑定事件使用事件代理的写法:
  <pre>
  // 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
  $('div').on('click', 'span', function(e){
  console.log(this);
  console.log(e);
  });
  </pre>

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

• 显示：
  <pre>$(selector).show(speed,callback);</pre>

• 隐藏：
  <pre>$(selector).hide(speed,callback);</pre>

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
本质上是修改dom.style.display属性

6.jquery 动画如何使用？

Query animate() 方法用于创建自定义动画。

<pre>$(selector).animate({params},speed,callback);</pre>
简单用法实例：
<pre>
<div class="box" style="width:100px">
</div>
<button class="btn"></button>
$(".btn").on("click",function() {$(".box").animate({ width:"200px" })})
</pre>

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

• text() 设置或返回所选元素的文本内容，无内容时是获取，有内容时是设置

• html() 设置或返回所选元素的内容（包括 HTML 标记），无内容时是获取，有内容时是设置

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

• val() 设置或返回表单字段的值，无内容时是获取，有内容时是设置

• attr() 设置或返回元素的属性，无内容时是获取，有内容时是设置

• 获取
  <pre>
  <p id="test">这是段落中的<b>粗体</b>文本。</p>
  <input id="test-input" type="text" placeholder="测试表单val">
  <a id="test-a" href="http://www.jirengu.com">这是链接</a>[站外图片上传中……(1)]
  <script>
  console.log( $('#test').html() ); // 这是段落中的<b>粗体</b>文本。 console.log( $('#test').text() ); // 这是段落中的粗体文本
  console.log( $('#test-input').val() );
  console.log( $('#test-a').attr('href') );
  console.log( $('#test-img').attr('data-src') );
  </script>
  </pre>

• 设置：
  <pre>
  $('#test').html('<span>hello</span>'); $('#test').text('<span>hello2</span>');
  $('#test-input').val('小明');
  $('#test-a').attr('href','http://www.baidu.com');
  $('#test-img').attr('src', $('#test-img').attr('data-src'));
  </pre>

版权归吴秀芳和饥人谷所有，若有转载，请注明来源