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))