JQuery

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")  //设置元素的属性