我爱编程

jQuery基础

2017-07-29  本文已影响0人  饥人谷_Leon

题目1： jQuery 能做什么

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？

区别：

转化：
jQuery对象转成DOM对象： 两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。代码如下:

var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 如：代码如下:

var $v=$("#v"); //jQuery对象
 var v=$v.get(0); //DOM对象
 alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象: 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 如：

var v=document.getElementById("v"); //DOM对象
 var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。 通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
参考文档

题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

.on( events [, selector ] [, data ], handler(eventObject) )(jQuery 1.7添加）
事件名称可以添加指定的event namespaces（命名空间） 来简化删除或触发事件。例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理，可以用.off("click.myPlugin") 或 .off("click.simple")删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。

$('xxx').on.('click','a',function(){})//例子

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

on事件代理

$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

注意: 委托事件不能用于SVG.
使用对象同时添加多个事件处理函数

<!DOCTYPE html>
<html>
<head>
  <style>
.test { color: #000; padding: .5em; border: 1px solid #444; }
.active { color: #900;}
.inside { background-color: aqua; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div class="test">test div</div>
<script>$("div.test").on({
  click: function(){
    $(this).toggleClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});</script>
 
</body>
</html>

参考文档
JＱuery中文ＡＰＩ

题目4：jQuery 如何展示/隐藏元素？

题目5： jQuery 动画如何使用？

Example: 第一个按钮要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。 第二个按钮要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  background-color:#bca;
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
button {
  font-size:14px;
}
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
 
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
 
$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});
 
$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});
 
$( "#go3" ).click(function(){
  $( "#go1" ).add( "#go2" ).click();
});
 
$( "#go4" ).click(function(){
  $( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
 
</script>
 
</body>
</html>

题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

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

<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { color:blue; margin:8px; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <input type="text" value="some text"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>
 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <p>Type something and then click or tab out of the input.</p>
  <input type="text" value="type something" />
 
<script>
  $('input').bind('blur', function() {
    $(this).val(function( i, val ) {
      return val.toUpperCase();
    });
  });
  </script>
 
</body>
</html>

$('#greatphoto')
.attr('title', 'Photo by Kelly Clark')

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});
上一篇下一篇

猜你喜欢

热点阅读