JQuery能做什么？
Jquery是一个高效、精简并且功能丰富的JavaScript工具库，简化大量的DOM操作，方便快捷，如选择网页元素、改变结果集、元素的操作、工具方法、事件处理、动画和Ajax操作等，并且对于浏览器有良好的兼容性。与时俱进
JQuery对象和DOM原生对象有什么区别？如何相互转换？
-
JQuery对象是一个类数组对象（封装DOM对象后产生的对象），可以使用jQuery的API
JQuery对象.png -
DOM原生对象，只能使用原生对象的方法
DOM对象.png 转换的方法
$(".ct")[0] === document.querySelector(".ct")
$(document.querySelector(".ct")) === document.querySelector(".ct")
选择器
- 基本选择器
基本选择器.png
- 组合/层次选择器
组合/层次选择器
- 基本过滤选择器
基本过滤选择器
- 内容过滤选择器
- 可视化选择器
- 属性过滤选择器
- 子元素过滤器
- 表单元素选择器
对于一个特定结果集，获取指定index的jQuery对象，可以使用eq方法
$(".ct").eq(2) //获取结果集中第二个jQuery对象
- 兄弟元素的获取
$("div").next() // 取得结果集中每个元素后面紧邻同辈元素的集合
$("div").prev(".box2") //取得结果集中每个元素之前的同辈元素
- 父子元素的获取
$().parent() //取得匹配元素中每个元素的父元素
$().parents(“div”) //取得集合中每个匹配元素的祖先元素
$().children() // 取得匹配元素集合中每个元素的子元素
$().find("div") //查找符合选择器的后代元素
- 筛选当前结果集
$().first() //获取当前结果集中的第一个对象
$().last() //获取当前结果集中的最后一个对象
补充
jQuery DOM操作
创建元素
将DOM字符串传入$()即返回一个jQuery对象
var obj = $('<div>newnewnewnewnew</div>');
添加元素
- append()
一次可以添加多个内容（DOM对象、HTML string、jQuery对象）；
若参数是function，function则可返回DOM对象、HTML string、jQuery对象
$('.ct').append(obj);
- appendTo(target)
- before()
- insertBefore(target)
- after()
- insertAfter(target)
- prepend()
- prependTo(target)
与上类似
删除元素
- remove()
- empty()
- detach()
包裹元素
- wrap() 在每个匹配的元素外层包裹一个HTML元素
$(".inner").wrap("<div></div>")
- wrapAll() 在所有匹配到的元素外层包裹一个公共的HTML元素
$('.inner').wrapAll('<div class="new" />')
- unwrap() 将匹配到的元素的父级元素删除，保留自身
- wrapInner() 在匹配到的元素的内容包裹一个HTML元素
将对象插入到目标元素的尾部，目标元素可以是选择器、DOM对象、HTML string、元素集合、jQuery对象
$('<div>addaddadd</div>').appendTo(".ct");
html()
当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
text()
和html方法类似，操作的是DOM的innerText值
jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- 绑定事件
.on(events，[selector],[data],handler(eventObject))
$(".ct2>ul>li").on("click",function(e){
var str = $(this).text();
$("#wrap").text(str);
})
$("#btn").on("click",function(e){
var newLi = $("#ipt").val()
$(".ct2>ul").append("<li>"+newLi+"</li>");
})
- bind 为一个元素绑定一个事件处理程序
- unbind 为一个元素解绑一个事件处理程序
- delegate 为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素
- live 附加一个事件处理器到匹配目前选择器的所有元素，现在和未来已废弃
- on 在选定的元素上绑定一个或多个事件处理函数
-off 移除一个事件处理函数
其中吧，bind、unbind、delegate为1.7版本之前的，后期版本多使用on 、off进行事件绑定与删除 - 事件代理写法
//添加事件代理
$(".ct2>ul").on("click","li",function(e){
var str = $(this).text();
$("#wrap").text(str);
})
$("#btn").on("click",function(e){
var newLi = $("#ipt").val()
$(".ct2>ul").append("<li>"+newLi+"</li>");
})
jQuery 如何展示/隐藏元素？
$(".ct").css("display","none");
$(".ct").hide();
$('.box1').hide(3000,function(){ //隐藏元素
$('.box1').show(3000); //展示元素
});
jQuery 动画如何使用？
.animate(properties [duration],[easing],[complete])
其中properties表示一个CSS属性和值的对象,动画将根据这组对象移动。complete表示动画完成后执行的函数
如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 获取元素内部HTML内容
$(".ct").html()
- 设置元素内部HTML内容
$(".ct").html("<h1></h1>")
- 获取元素内部文本
$(".ct").text()
- 设置元素内部文本
$(".ct").text("00000")
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 获取用户输入内容或选择内容
// 设置和获取表单用户输入或者选择的内容&设置和获取元素属性
$(".btn").on("click",function(){
var content = $(".ipt").val(); //获取内容
$(".show").append("<p>"+content+"</p>");
})
// 设置和获取表单用户输入或者选择的内容&设置和获取元素属性
$(".btn").on("click",function(){
var content = $(".ipt").val();
$(".show").append("<p>"+content+"</p>");
})
$(".btn2").on("click",function(){
$(".ipt").val("addaddadd"); //设置内容
})
- 设置和获取元素的属性
$(".box1").attr("name") //获取元素的属性
$(".box1").attr("id","content1") //设置元素的属性
