jQuery初识

jQuery 能做什么？

jQuery是一款快速而简洁的javascript的库,核心是构建与css选择器上,用来操作DOM元素,通过链式调用,兼容性好,API 友好,功能强大，与时俱进

选择网页元素
改变结果集
元素的操作：取值和赋值
元素的操作：移动
元素的操作：复制、删除和创建
工具方法
事件操作
特殊效果
AJAX

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

对于jQuery对象只能使用jQuery对象的API
对于原生对象只能使用原生对象的 API

如何转化?

对于原生转化为jQuery,只需在外面加上一层$符号

$(document.querySelector("#box"))
就可以变为jQuery对象,就可以使用jQuery对象的API了

对于jQuery对象转换为原生对象,只需要加个[下标]

$("#box .box")[0]
,就可以使用j原生对象的API了

问题是:那我们又不想变成原生对象,又想取值怎么办呢?
$("#box .box").eq(0)  //.eq(index)

jQuery DOM操作,如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

<div class="container">
  <ul class="wrap">
    <li>1</li>
    <li class = "active">2</li>
    <li>3</li>
  </ul>
</div>

//创建元素
$("<div class="box"><h1>创建html元素</h1></div>")
//添加元素append
var $li = $("<li>4</li>")
$(".wrap").append($li)   //添加到元素的后面
$li.appendTo($(".container .wrap"))  //把对象插入到目标元素尾部

var $li1 = $("<li>0</li>")
$(".wrap").prepend($li1)  // 向对象头部追加内容，用法和append类似，内容添加到最开始

$li.before($li1)  //翻译就是:4的前面是0
$li.before($("<li>5</li>"))  //翻译:4的前面新建了5

$li.after($li1)  //翻译就是:4的后面是0
$li.after($("<li>5</li>"))  //翻译:4的后面新建了5

//删除元素.remove()
$(".wrap li").eq(3).remove()  //删除第三个li

$(".wrap").empty()  //清空ul下所有的li  .empty()清空被选择元素内所有子元素


// $(selector).html()用于获取/修改元素的innerHTML
     当没有传递参数的时候，返回元素的innerHTML
     当传递了一个string参数的时候，修改元素的innerHTML为参数值
// $(selector).text()设置文本内容

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

//html demo点击在div里显示增加
<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text">
<button id="btn">添加</button>

<div class="wrap">


</div>

//jQuery
$(".box>ul>li").on("click",function(){
  var str = $(this).text()
  $(".wrap").text(str)  //text() == innerText
})

$("#btn").on("click",function(){
  var value = $("#ipt").val()
  $(".box>ul").append('<li>'+value+'</li>')  //添加value
})

事件效果

那使用事件代理呢?

//事件代理
$(".box>ul").on("click","li",function(){
  var str = $(this).text()
  $(".wrap").text(str)
})

$("#btn").on("click",function(){
  var value = $("#ipt").val()
  $(".box>ul").append('<li>'+value+'</li>')
})

事件代理

.trigger( eventType [, extraParameters ] )根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
bind为一个元素绑定一个事件处理程序，适用于早期jQuery版本（1.7以前）
unbind从元素上删除一个以前附加事件处理程序。
delegate为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
live附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
on在选定的元素上绑定一个或多个事件处理函数。
off移除一个事件处理函数

现在推荐使用on(),off()来绑定/解除事件。

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

// .val() 读写双用的方法，用来处理input的value
<input id="ipt" type="text" value="hello">
$("#ipt").val() //"hello"
$("#ipt").val("hello World")  //"hello World"

// .attr(attributeName) 获取元素特定属性的值
$("#ipt").attr("type")  //查看属性值  "text"
$("#ipt").attr("type","checkbox")  //设置属性  变为了多选框

// .removeAttr()  移除属性
$('div').removeAttr('id') //移除id属性

// .css() 类似于 style
<div class="box"></div>
$(".box").css({"width":"200px",   //设置css样式
               "backgroundColor":"yellow",
               "height":"30px"})
// .addClass()
// .removeClass()
// .hasClass()
// .toggleClass(className) toggle是切换的意思，方法用于切换

// .hasClass(className) 检查元素是否包含某个class，返回true/false
$( "#mydiv" ).hasClass( "foo" )

jQuery属性如何展示/隐藏元素？ jQuery 动画如何使用？

//展示
.show( [duration ] [, easing ] [, complete ] )
  duration：动画持续多久
  easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
  complete：在动画完成时执行的函数

//隐藏
.hide([duration ] [,easing ] [,complete ])
  duration：动画持续多久
  easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
  complete：在动画完成时执行的函数

//切换
.toggle( [duration ] [, easing ] [, complete ] ) 用法同上

// 渐变
.fadeIn( [duration ] [, easing ] [, complete ] )通过淡入的方式显示匹配元素，参数含义和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )通过淡出的方式隐藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
.fadeToggle( [duration ] [, easing ] [, complete ] )

//滑动
.slideDown( [duration ] [, easing ] [, complete ] )用滑动动画显示一
个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

.slideUp( [duration ] [, easing ] [, complete ] )用滑动动画隐藏一个匹配
元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分
滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性
被设置为none，以确保该元素不再影响页面布局。 display 样式属性将
被设置为none，以确保该元素不再影响页面布局。

//自定义
.animate( properties [, duration ] [, easing ] [, complete ] )  
//properties是一个CSS属性和值的对象,动画将根据这组对象移动。

.stop( [clearQueue ] [, jumpToEnd ] )
//停止匹配元素当前正在运行的动画。