jQuery选择器_Dom操作_样式_事件处理_动画

2017-09-02 本文已影响0人 Taaaaaaaurus

题目1： jQuery 能做什么？

方便快捷获取DOM元素
　　如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：
$('div.content').find('p');
动态修改页面样式
　　使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：
$('ul > li:first').addClass('active');
动态改变DOM内容
　　使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"Container"的元素添加一个链接：
$('#container').append('<a href="more.html">more</a>');
响应用户的交互操作
　　jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。
```
 $('button.show-details').click(function() {
   $('div.details').show();
 });
```
为页面添加动态效果
　　jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。
```
$(function () {
 $("#btnShow").click(function () {
   $("#msubject").hide("slow");
  });
});
```

上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

统一Ajax操作
　　jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。

 function (data, type) {
    // 对Ajax返回的原始数据进行预处理
    return data // 返回处理后的数据
 }

简化常见的JavaScript任务。
　　除了这些完全针对文档的特性之外，jQuery也改进了对基本的javascript数据结构（例如迭代和数组操作等）。
```
$.each(obj, function(key, value) {
   total += value;
});
```

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

DOM原生对象：w3c标准用于操作文档的API。
jQuery对象：通过jQuery包装DOM对象后产生的对象。
区别：
- jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
- jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
  例如：
  　　$("#id").html();
  　　document.getElementById("id").innerHTML;
  　　意思是指：获取ID为id的元素内的html代码。这两段代码结果相同，但中间的取值过程不同。
  　　即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
相互转换：
jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)
- jQuery对象是一个数据对象，通过[index]的方法
  　　如：
  　　var $v = $("#v") ; //jQuery对象
  　　var v = $v[0]; //DOM对象
  　　alert(v.checked) //检测这个checkbox是否被选中
- jQuery本身提供，通过.get(index)方法
  　　如：
  　　var $v = $("#v"); //jQuery对象
  　　var v = $v.get(0); //DOM对象
  　　alert(v.checked) //检测这个checkbox是否被选中
  DOM对象转成jQuery对象:
  　　对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
  　　如：
  　　var v=document.getElementById("v"); //DOM对象
  　　var $v=$(v); //jQuery对象

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

jQuery绑定事件用bind、或delegate、或live、或on
bind() 为一个元素绑定一个事件处理程序，示例如下：
- $(‘button’).bind(‘click’,function(){console.log(this)});
- $(‘p’).bind(‘mouseenter mouseleave’,function({$(this).toggleClass(‘change’)})；
unbind() 从元素上删除一个以前附加事件处理程序，示例如下：
- $('p').unbind('mouseenter');
  在最简单的情况下，不带参数的.unbind() 将移除元素上所有绑定的处理程序
delegate() 为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
live() 附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。

on() 在选定的元素上绑定一个或多个事件处理函数。

$('button').on('click',function(){
  $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>');
   console.log($('p').length);
 });

off() 移除用.on()绑定的事件处理程序

绑定事件和解绑事件推荐使用`on()`和`off()`

使用on绑定事件使用事件代理

//让.ct>ul中的所有li绑定事件
$('.ct>ul').on('click','li',function(){
  var $this=$(this);
  var str=$this.text();
  $('.wrap').text(str);
})

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

jQuery展示元素：

$('.btn').on('click',function(){
  $('.show').show(3000,'linear',function(){
    alert('welcome');
  });
});

2.通过淡入的方式显示匹配元素

$('.btn').on('click',function(){
  $('.show').fadeIn(3000);
});

3.用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$(.btn).on('click',funtion(){
  $('.show').sildeDown(3000);
})

jQuery隐藏元素
1.$('.show').hide(1000);
2.通过淡出的方式隐藏匹配元素
```
$('.btn').on('click',funtion(){
  $(.show).fadeOut(3000,'slow');
});
```
3.用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
```
$('.btn').on('click',funtion(){
  $(.show).fadeOut(3000,'slow');
});
```

题目5： jQuery 动画如何使用？
.animate( properties [, duration ] [, easing ] [, complete ] )
用法：jquery对象.animate(执行动作(一般都是css样式),回调函数(可选));
例子：

<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        #ct {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="ct">animate</div>
    <button type="button">动画</button>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $('button').on('click', function a() {
            $('#ct').animate({
                left: '300px',
            }, 3000);
            $('#ct').animate({
                top: '300px',
                left: '0'
            }, 'slow');
            $('#ct').animate({
                left: '300'
            }, 'slow');
            $('#ct').animate({
                left: '0',
                top: '0'
            }, 'slow');
        });
    </script>
</body>
</html>

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

获取元素内部HTML内容
```
console.log($('.html').html());
```

设置元素内部内容

$('.html').html('<p>设置内部HTML内容</p>');

获取元素内部文本
```
console.log($('.text').text());
```

设置元素内部文本

$(.text).text('设置元素内部文本');

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

获取和设置表单用户输入或者选择的内容
$('input').val();
$('input').val('newValue');
当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

获取和设置元素属性

//获取元素特定属性的值
var title = $( "em" ).attr( "title" );
//为元素属性赋值
$( ".greatphoto" ).attr( "alt", "Beijing Brush Seller" );

$( ".greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

$( ".greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

代码8
)
代码9
代码10
代码11

jQuery选择器_Dom操作_样式_事件处理_动画

绑定事件和解绑事件推荐使用`on()`和`off()`

猜你喜欢

热点阅读

jQuery选择器_Dom操作_样式_事件处理_动画

绑定事件和解绑事件推荐使用on()和off()

猜你喜欢

热点阅读

绑定事件和解绑事件推荐使用`on()`和`off()`