jQuery选择器 | Dom操作 | 样式 | 事件处理

一瞬..

库&框架

库（Library — 简称:Lib )，框架（Framework）

库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。

框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码。

jQuery作用

将原生DOM元素的功能实现并且满足良好的兼容性，最重要的是，可以简化代码。 jquery是一个丰富的js库，内部对js的很多复杂的方法进行了封装和加工，比如js很多方法名很冗长，jquery封装后方法就变得简便了，也考虑到了跨浏览器兼容问题，这样我们用js时需要考虑的很多问题它都帮我们解决了，这样我们使用时就比js代码要方便，高效的多。

`
$(“css选择器”) 代替了 document.getElementsByTagName("")、document.getElementById("")…
$(“css选择器”).css('color','red') 代替了 document.getElementById("").style.color = 'red'。
$(“css选择器”).text("") 一个api同时具有读跟写的功能。($("div").text("How Are You..");)。
$(“css选择器”).on('click', function (){}),监听事件。
`

jQuery 对象 | DOM 原生对象的区别 & 转化

DOM原生对象：是我们用传统的方法（JavaScript）获得的对象，它通常是javascript固有的一些对象，DOM对象能使用javascript固有的方法，但是不能使用jQuery里面的方法。
jQuery对象：是用jQuery的类库选择器获得的对象，它通常是一个类数组对象，也是通过封装DOM对象后产生的对象。jQuery对象是jQuery独有的，它可以使用jQuery里的方法，但是不能使用DOM的方法。

`
//DOM对象转化成jQuery对象
var btn = querySelector('#btn')
var $btn = $(btn)
`

`
//jQuery对象转化成DOM对象
var $btn = $('#btn')
var btn = $btn[0]
`

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

jQuery中，可使用 bind、delegate、live、on等来绑定事件（下面）。

on：在选定的元素上绑定一个或多个事件处理函数。 off：移除一个事件处理函数。 bind：用于直接附加一个事件处理程序到元素上。（较早1+版本方法） unbind：从元素上删除一个以前附加事件处理程序。（较早1+版本方法） live：附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。 delegate：为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。

`
$(".className").on('eventType',function(){
  //jquery通过on来绑定事件  
})
//bind和unbind是较早版本的jquery的语法，不推荐使用
$('.classname').bind('click',function(){
    $(this).html()
})
//unbind与bind的操作相反
$('.classname').unbind()    //取消绑定在选定元素的所有事件
$('.classname').unbind('click')     //取消绑定在选定元素的单击事件
//delegate，给选定元素的子元素绑定事件
$('.parentname').delegate('.childname','click',function(){
    //使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
})
//.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：
//绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递
//给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处
//理函数，绑定在 DOM 树的根节点上
$('.classname').live('click',function(){
  dosth...
})
//加入执行完以后，又有新的匹配.classname的元素添加进dom中的话，对其也会动态的绑定click事件
//无论是bind和unbind还是delegate或者live，现在一次性全部可以通过.on()的方
//式去实现，所以上述四个方法已经很少使用
//.off()是.on()的操作相反，用来移除通过on绑定的事件
`

`
$('ul li').on('click',function(e){
     $('this').text();
});
$('ul').on('click', 'li', function(){
     $('this').text();
});
`

jQuery 如何展示/隐藏元素

`
//Method One
$('.classname').show(speed,callback)//展示选中的元
$('.classname').hide(speed,callback)//隐藏选中的元素
//Ps: speed可以控制元素从无到有的过度时间，callback是元素完全展示后的回调函数
//Method Two
$('button').on('click', function() {
  $('#box').toggleClass('b-hide')
})
//做个开关..
`

jQuery 动画如何使用？

animate(properties, [duration], [easing], [complete]) properties是一个CSS属性和值的对象，动画将根据这组对象移动 duration 规定效果的时长，取值为'slow', 'normal', 'fast'或毫秒数 easing规定在不同动画点中设置动画速度函数，取值为swing，linear,其他效果可以使用jQuery Easing Plugin插件 callback animate函数执行完后，要执行的函数
animate(properties, [options]) optioins 规定动画的额外选项取值： speed 设置动画速度 easing 规定在不同动画结点要使用的动画速度函数 callback animate函数执行完后，要执行的函数 step 规定动画的每一步完成后要执行的函数 queue 布尔值指示是否在效果队列中放置动画，如果为false，则动画立即开始 specialEasing 来自properties参数的一个或多个CSS属性映射，以及他们对应的easing函数

`
animate() 对被选元素应用“自定义”的动画 
clearQueue() 对被选元素移除所有排队的函数（仍未运行的） 
delay() 对被选元素的所有排队函数（仍未运行）设置延迟 
dequeue() 运行被选元素的下一个排队函数 
fadeIn() 逐渐改变被选元素的不透明度，从隐藏到可见 
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏 
fadeTo() 把被选元素逐渐改变至给定的不透明度 
hide() 隐藏被选的元素 
queue() 显示被选元素的排队函数 
show() 显示被选的元素 
slideDown() 通过调整高度来滑动显示被选元素 
slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换 
slideUp() 通过调整高度来滑动隐藏被选元素 
stop() 停止在被选元素上运行动画 
toggle() 对被选元素进行隐藏和显示的切换
`

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

.html([string]) 用于获取/修改元素的innerHTML .无参数时，返回元素的innerHTML . 有参数时，修改元素的innerHTML为参数值
.text([string]) 无参数时，获取元素内部文本有参数时，设置元素内部文本为参数值如果结果是多个时进行赋值操作的时候会给每个结果都赋值如果结果是多个，获取值的时候，返回结果集中的第一个对象的相应值

`
$('Tag').html()//不加参数即可获取内部html内容
$('Tag').html('我是改变后的html内容')//加参数即可设置内部html内容
$('Tag').text()//不加参数即可获取内部文本
$('Tag').text('我是改变后的文本内容')//加参数即可设置内部文本
`

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

`
$('Tag').val()//不加参数即可获取用户输入或选择的内容
$('Tag').val(modifiedVal)//加参数即可设置用户输入或选择的内容
$('Tag').attr(attributeName)//传入元素属性名即可获取元素的属性值
$('Tag').attr(attributeName,attributeVal)//传入元素属性名和要设置的属性值即可完成对元素的属性设置
`

HuangHongRui / Notebook