jQuery选择器_Dom操作_样式

题目1：

说说库和框架的区别？

库：库封装了原生代码，不用像原生代码这样考虑很多的兼容问题，使用库，只需要调用库的接口，处理调用库接口，没有其他约束，不考虑兼容，使用起来很自由，如jQuery库

框架：框架封装的是某个具体的插件，使用者需要按照它的一套思路代码完全执行，比如Bootstrapt就是前端的一个页面友好响应式框架，使用Bootstrapt就是把它里面的插件直接搬过来使用，前端框架还有AnglarJS,上面提到的两个框架都会约束原生DOM

做个类比：
如果你想要一张凳子
你有两种办法
第一种：自己拿木头造
第二种：去买一张凳子
这里的木头就是库
这里买来的凳子就是框架里面的插件

前端有哪些库和框架

库：jQuery，zepto（移动端的jQ库）,react
框架：bootstrap，angularjs

题目2：

jquery 能做什么？

简化了原生js操作DOM，事件，动画，Ajax
并且兼容了大量的浏览器（流行浏览器和IE）
jQuery的宗旨：写更少的代码做更多的事情

题目3：

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

区别：
jquery 对象只能调用jquery的属性和方法
DOM 原生对象只能调用原生js的属性和方法

转化：

DOM原生对象->jquery对象

var Odiv= document.getElementsByTagName("div")
var $div= $(Odiv)   //得到jquery对象

jquery对象>DOM原生对象

//方法一
var $div=$("div")
var Odiv1=$div[0]   //得到DOM原生对象
//方法二
var  Odiv2=$div.get()//$div是一个类数组，get()得到一个原生DOM类数组
var   Odiv3=$div.get(0)//从原生DOM数组里面取得第一个值节点

题目4：

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

（1）绑定事件

 //第一种 ：一般的简单笼统绑定事件
$(",ct").on("click",function(){
         console.log(1)
})
//第二种：事件代理 ,下面函数里面的this指的是当前点击的li节点
$("ul").on("click",li,function(){
         console.log(1)
})
//第三种：为事件命名
$("ul").on("click.haha",li,function(){
         console.log(1)
})
 //第四种 ：只执行一次绑定事件
$(",ct").one("click",function(){
         console.log(1)
})

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

老版本jQuery:

bind：

绑定事件方法，只能把事件绑定在页面上存在的元素，静态绑定

unbind：

解绑事件方法，和bind()事件绑定对应

delegate ：

只能动态绑定事件,根元素为父元素，把事件绑定到这个父元素的后代元素上，并且可以过滤要绑定的后代元素，最重要的是可以对未来的后代元素添加绑定事件

live：

动态绑定，旧版本jQuery应优先使用delegate动态绑定事件，因为在pc端：（1）使用live绑定事件会降低代码处理性能（2）不支持链式写法等限制，（3）$(document).unbind("click") 会移除所有通过 .live() 添加的 click 事件!
移动端：也会有很多的限制，移动端click 事件不会冒泡到文档 body 上，并且如果不满足如下情况之一，就不能和 .live() 方法一起使用：
（1）使用原生的可被点击的元素，例如, a 或 button，因为这两个元素可以冒泡到 document。
（2）在 document.body 内的元素使用 .on() 或 .delegate() 进行绑定，因为移动 iOS 只有在 body 内才能进行冒泡。
（3）需要 click 冒泡到元素上才能应用的 CSS 样式 cursor:pointer (或者是父元素包含 document.documentElement)。但是依需注意的是，这样会禁止元素上的复制/粘贴功能，并且当点击元素时，会导致该元素被高亮显示。

 //bind
 //eventType :事件   eventData ：传入处理函数的数据（对象）  handler：处理函数  preventBubble ：阻止冒泡，默认为true  events ：传入的一个对象，包含事件及处理函数
.bind( eventType [, eventData ], handler(eventObject) )
.bind( eventType [, eventData ], preventBubble )
.bind( events )
//unbind
$('#foo').unbind();//解绑$("#foo")上所有绑定事件
$('#foo').unbind('click');//只解绑$("#foo")上的单击事件
$( "#foo" ).unbind( "click", handler );//只解绑$("#foo")上单击事件处理函数是handler的事件，注意这里的handler是函数的引用名称
$( "#foo" ).unbind( "click.myEvents" );//只解绑$("#foo")上单击事件的名称是myEvents的事件
$( "#foo" ).unbind( ".myEvents" );//直接解绑事件名称为myEvents的事件
//在事件绑定里面达到某个条件时，解除自身绑定  
var timesClicked = 0;
$( "#foo" ).bind( "click", function( event ) {
alert( "The quick brown fox jumps over the lazy dog." );
timesClicked++;
if ( timesClicked >= 3 ) {
 $( this ).unbind( event );
}
});
//delegate
parent.delegate( selector, eventType, handler(eventObject) )
parent .delegate( selector, eventType, eventData,  handler(eventObject) )
parent .delegate( selector, events )

新版本jQuery:
on：绑定事件方法（可以静态绑定，也可以使用事件委托动态绑定事件，根元素是父元素或子元素）
off：解绑事件方法（和on对应起来实现解绑事件）

//on
.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )
//off
.off( events [, selector ] [, handler(eventObject) ] )
.off( events [, selector ] )

题目5：

jquery 如何展示/隐藏元素？

代码及效果

题目6：

jquery 动画如何使用？

一个jQuery动画例子

题目7：

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

代码

题目8：

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

 //获取表单用户输入的内容
  $("input").val()
 //设置表单内容
  $("input").val()
 //设置元素属性
 box
 $(".ct").attr("name","hi")
//获取元素的属性
 haha
 $(".ct").attr("name")

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