jQuery基础和DOM对象比较

JavaScript库

• 即library，是一个封装好的特定集合（方法和函数）。比如animate、hide、show，比如获取元素等。
• 简单理解：就是一个js文件，对js文件进行了原生封装，存放到里面。我们可以高效使用这些功能。
• 比如jQuery，就是为了方便操作DOM，就是函数方法。

jQuery

• jQuery是个快速，简洁的JavaScript库，可以写更少的代码，做更多事情。
• j就是JavaScript。Query是查询的意思；就是查询js，把js中的DOM操作进行了封装，可以快速使用里面的功能
• jQuery封装了JS常用的功能代码，优化了DOM操作。
• DOM操作:用来操作html页面元素的对象
• jQuery本质：学习调用这些方法。

优点

• 轻量级
• 快浏览器
• 大大优化了DOM操作
• 免费，支持插脚扩展

基本使用

• 要引入jQuery的文件
• hide():隐藏，加$或者jQuery，可以等div加载后执行函数。
• $是jQuery中顶级对象，约等于jQuery。约等于JS里的window。

//dom加载完毕，在执行代码
 $(function()){
   $('div').hide();
 }
 <div></div>

jQuery和DOM对象

• DOM对象：用原生js获取的对象就是DOM对象。

//通过doucument获取div对象
var myDiv=document.querySelector(div);

• jQuery对象：由jQuery获取的对象，本质是：利用$对DOM对象包装后产生的对象。（伪数组形式存储）

 $('div')

• DOM只能用原生JS方法，jQuery只能用jQuery方法和属性。

jQuery和DOM对象转化

• DOM转化为Query

//直接转化
  $('div')
//使用原生js获取过来的DOM对象
  var myDiv=doucument.querySelector('div')
  $(myDiv)

• jQuery转化为DOM

$('div')[0]
$('div').get(0)

基本函数

<div=class="nav">
$(".nav")//获取nav
$("ul li") //获取ul里的li
$("ul li:last")//获取最后一个li
$("nav").css("background","pink")//把所有div改成pink色
$("nav").children("p").css("color","red")//把nav的儿子是p的都变成红色
$("nav").siblings("li")//兄弟
$("nav:eq(2)")//索引号，第三个元素
$(this)//当前对象，不加引号。
$(this).index();//获取索引号

• 隐式迭代：遍历内部DOM元素过程叫隐式迭代。css("background","pink")
• 排他思想：5个按钮，只有一个按钮出现颜色，其他无色。先把所有元素变粉色，然后这个当前对象兄弟变成无色。

事件

$(".nav").mouseover(function(){})//鼠标离开
$(".nav").show//表单出现
$(".nav").hide//表单隐藏

样式操作

• width必须加引号

$(".nav").css("width",300px)
$(".nav").css({
 width:400,
 height:400,
 color:"red"
 })

类操作

• 里面类不加点

//点击后取消这个类，里面类不加点
<div class="current">
$(".div").click(function(){
  //添加类
  $(this).addClass("current");
  //移除类
  $(this).removeClass("current");
  //切换类
  $(this).toggleClass("current");
})

类操作于className的区别

• className会覆盖原先的类
• addClass是增加，不影响以前的类名。

//把类one变成类two
one.className('two')
$(this).addClass("two");

获取元素属性

//获取a的链接
$(a).prop("href")
//更改属性
$(a).prop("title",womendouhao")
//自定义属性获取
$(a).attr("index")
//缓存在内存中
$(span).data("uname","andy")
console.log($(span).data("uname"))

内容获取

//相当于innerHTML，获取设置元素内容
$(a).html
//获取文本，相当于innerText。获取设置文本内容
$(a).text

元素操作

$.each

创建元素

//创建元素但不显示
$(<li><.li>)
//放到最后面
$("ul").append(li)
//.nav外部添加div
$(".nav").after(div)
//删除元素
$("ul").remove()

jQuery事件

//点击事件
$("div").click(function(){})
//鼠标点击
$("div").mouseenter(function(){})
//多个事件
$("div").on({
  mouseenter:function(){},click:function(){}
})
//绑定ul点击事件，li显示函数内容
$("ul").on("click","li",function(){})
//on可以给未来动态创建元素绑定事件
$("ul").on("click","li",function(){})
//解除所有点击事件
$("div").off("click");
//解除事件委托,解除ul点击在li显示的事件
$("ul").off("click","li");
//自动触发事件
$("div").click();
$("div").trigger("click");

• 事件对象：触发事件，就会有对象产生

//event就是事件对象，有很多方法
$("div").on("click",function(event))