JQuery

jQuery

JavaScript 库 : 是一个封装好的特定的集合( 方法和函数 ) .

从封装一大堆函数的角度理解库, 就是在这个库中, 封装了很多预先定义好的函数在里面

入口函数

// 1. 传统写法
$(document).ready(function() {

})
// 2. 
$(function()) {

})

1. 等着 DOM 结构渲染完毕即可执行内部代码 , 不必等所有外部资源加载完毕
2. 相等于 原生js 中的DOMContentLoaded
3. 不同于 原生 js 中的load 事件(等页面文档,外部 js 文件,css 文件,图片加载完毕 才执行内部代码)

$

$ 是 jQuery 的别称 , 是 jQuery 的顶级对象

jQuery 转换为 DOM对象

client.width

$('div')[index]  index是索引号   //法一
$('div').get(index)  index是索引号   //法二

API

jQuery 选择器

$("选择器")  //括号里直接写CSS 选择器即可,但是要加引号
$(this).index()  //获得当前元素索引号

筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取的li元素中,选择索引号为2的元素,索引号index从0开始
:odd	$(‘li:odd’)	获取的li元素中, 选择索引号为奇数的元素
:even	$(‘li:even’)	获取的li元素中, 选择索引号为偶数的元素

语法	用法	说明
parent()	$(‘li’).parent()	查找父级(最近一级父元素)
children(selector)	$(‘ul’).children(‘li’)	相当于$(ul>li),(子代选择器)亲儿子
find(selector)	$(‘ul’).find(‘li’)	相当于 $(‘ul li’),后代选择器(所有的后代都可以查找)
siblings(selector)	$(’.first’).sibling(‘li’)	查找亲兄弟节点,不包括自己
nextAll([expr])	$(’.first’).nextAll()	查找当前元素之后的所有同辈元素
prevtAll([expr])	$(’.last’).prevtAll()	查找当前元素之前的所有同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’)	检查当前元素是否含有某个特定的类,如果有返回true
eq(index)	$(‘li’).eq(2);	相当于$(‘li:eq(2)’,index从0开始)

链式编程

$(this).css('color', 'red').siblings().css('color','');

隐式迭代

遍历内部DOM元素( 伪数组形式存储 )的过程叫做隐式迭代

给匹配到的所有元素进行循环遍历, 执行相应的方法,而不用我们再进行循环,简化操作

样式操作

$(function() {
    $(this).css("width")  //参数只写属性名 则返回 值
    $(this).css("width", "200px") //属性必须加引号,如果值是数字不限单位与引号
    $("div").css({
        width: 400,
        height: 400,
        // 参数 可以是对象形式,属性名与属性值用:(冒号)隔开
        //属性可以不加引号,值为数字也可以不加引号,如果值是字符串需要加引号
    })
}

$("div").click(function() {
    $(this).addClass();  //相当于追加类名 , 不影响之前的类名
    $(this).remove();   //移除类
    $(this).toggleClass();   //?
})

效果

显示与隐藏

show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle()  //切换

• 参数可以省略
• speed 三种(“show” , “normal” , “fast”)或者 表示动画时长的毫秒数值
• easing 用来指定切换效果,默认是 “swing” ,还有 “linear”
• fn: 回调函数 , 在动画完成后执行的函数, 每个元素执行一次

滑动

slideDown([speed,[easing],[fn])  //下滑动
slideUp([speed,[easing],[fn])  //上滑动
slideToggle([speed,[easing],[fn] )  //切换

停止

stop()   //停止上次的动画
hover(function() {}, function() {});  //第一个是鼠标经过;第二个是鼠标离开   || 如果只写一个函数表示两个事件共有一个函数

淡入,淡出

fadeIn([speed,[easing],[fn]) 
fadeOut([speed,[easing],[fn])  
fadeTo([[speed],opacity,[easing],[fn]])  //OPacity
fadeToggle([speed,[easing],[fn])

• opacity 透明度必须写
• speed 三种(“show” , “normal” , “fast”)或者 表示动画时长的毫秒数值
• easing 用来指定切换效果,默认是 “swing” ,可用非参数 “linear”

自定义动画

animate(params,[speed],[easing],[fn])

• params 想要更改的样式属性 , 以对象的形式传递,属性名可以不带引号,复合属性要用驼峰式命名法

JQ属性操作

prop("属性")  //获取
prop("属性", "属性值")  //设置属性值
change(  )  //????
//自定义
attr("属性")
attr("属性", "属性值")
data("属性")  // 不用写data- ,返回数字型
data("属性", "属性值")  //数据缓存//这里面的数据是存放在元素的内存里面

内容文本值

html()  //获取元素的内容(含标签)
taxt()  //获取元素的内容(不含标签)
//括号中可对内容进行修改
val()  //设置表单值

遍历元素

$("div").each(function(index, domEle) {
    // index 索引号   //demEle dom元素对象
    
})
$.each($("div"),function(i, ele) {
    
})  //主要处理函数
$.each(arr,function(i, ele) {
    
})

 $()//创建
element.append()  //内部添加放入最后面
element.prepend() //内部添加,放最前面
element.after()			//外部什么都有
element.before/        /外部什么都有
element.remove()  // 删除匹配的元素
element.empty()  //删除匹配元素里面的子节点

jQuery 尺寸

width( )  /  height()
innerWidth( ) / innerHeight()   //width和 height+padding
outerWidth()  //width + height+padding+border
outserWidth  //hright+padding+border+margin

offset()
offset().top /offset().left
position(); //带有定位的父级  只能获取不能改变

mouseover mouseout blur focus change keydown keyup resize scroll

element.on({

})
on('click', 'li' (子选择器), function(){

})
off()解绑  //接触事件

$.each($(""),funcion(i, ele))