初识

console.log($ == jQuery);// true jQuery就是$  等价的

 

页面加载

$(document).ready(function(){});//相当于原生window.onload(DOMContentLoaded)

比onload先执行

$(function(){})//简写

只需要文档结构加载完毕后执行,onload是文档和资源媒体加载完成。

DOM节点对象转换

jq的DOM节点与原生DOM节点互转

// jq转原生

console.log($(this));// 返回jq对象

// init数组对象  通过下标获取到的就是原生的DOM

console.log($('#box')[0]);

console.log($('#box').get(0));

$('#box').get(0).innerHTML = '哈哈';

让出$的使用权限

jQuery.noConflict();

console.log($); // undefind

// 闭包  将jQuery传到闭包中的$ 在闭包函数中又可以使用$来进行jq的操作

;(function($){

    $(function(){

        console.log($('#box'));

    })

})(jQuery)

// 给$起个名字

var jq = jQuery.noConflict(true);

console.log(jq('#box'));

选择器

基本选择器

$('#box')//id选择

$('.aa')//类名选择

$('li')//标签选择

层级选择器

$('ul li') //后代li

$('ul>li') // 子代的li

$('#li1+li')//#li1的下一个兄弟li

$('#li1~li')//#li1的所有的弟弟li

基本过滤选择器

$('li:first')// 获取第一个元素

$('li:last')// 获取最后一个元素 

$('li:not(#li1)')// 排除

$('li:odd')// 选择索引奇数---显示的偶数行

$('li:even')// 选择索引偶数---显示奇数行

$('li:eq(3)')//等于索引

$('li:gt(3)')//大于索引

$('li:lt(3)')//小于索引

// 选取索引为n的li

// $('li:eq(' + n + ')')

$('li').eq(n)

属性过滤选择器

$('li[name]')// 带有name属性的li

$('li[name=lucy]')// name属性值为lucy的li

$('li[name!=joy]')// name属性不为joy的li

$('li[name*=o]')// name属性值包含o的li

$('li[name^=j]')// name属性的值以j开头的

$('li[name$=y]')// name属性的值以y结尾的

表单选择器

$('input')//标签input

$(':input')//不论标签名 只要是表单元素 都选取

$(':text')

$(':password')

$(':radio')

$(':checkbox')

$(':file')

$(':submit')

$(':button')

DOM

DOM节点遍历

遍历节点

$('ul').children()// ul下的所有子节点

$('ul').children('p')// ul下的p子节点

$('ul').find('p')// ul下的所有后代p

$('#box').next()// box的下一个兄弟

$('#box').nextAll()// box的下边的所有兄弟

$('#box').prev()// box 上一个

$('#box').prevAll()//上边所有的兄弟

// box的所有的兄弟节点(之前的和之后的全算)

$('#box').siblings()

$('#box').siblings('p')

遍历父节点

$('#box').parent()//真正的父节点

$('#box').parents()//所有的祖先节点

$('#box').parents('div')//所有祖先中的div

遍历节点 - 过滤

$('#box').find('li')// find  获取后代元素

$('li').filter('.aa')// filter 过滤找到满足条件的元素

$('li').not('.aa')// not 排除满足条件的元素 选择其他元素

属性操作

$('#box').attr('title')//获取

$('#box').attr('title','xixi');// 设置

// 批量设置

$('#box').attr({

    title: 'heihei',

    sex : 'female'

})

$('#box').removeAttr('sex');// 删除属性

 

属性值为true和false的属性操作

$(':checkbox').attr('checked');// 获取 --> checked

$(':checkbox').prop('checked');// 获取 --> true

$(':checkbox').prop('checked', true);// 设置

class操作

$('#box').addClass('red');//添加类red

$('#box').removeClass('red');// 删除red

判断该元素box上是否有red

$('#box').hasClass('red') // Boolean

$('#box').is('.red')// Boolean

切换类名  toggleClass

$('#box').toggleClass('red');

css操作

// 获取样式

$('#box').css('width')

// 设置

$('#box').css('background','red');

// 批量设置

$('#div1').css({

    width:'200px',

    fontSize:'18px'//font-size  去-变驼峰

})

html 文本与值的操作

innerHTML  --->  html()

innerText  --->  text()

表单value  --->  val()

$('#s1').html() // 获取 识别标签

$('#s1').text() // 获取 只识别文本

// 设置

$('#box').html('<i>过年好!</i>');// 会识别标签

$('#box').text('<i>过年好!</i>');// 不会识别

// 表单的value

$(':text').val()

$(':text').val('ddddd');

Node操作

创建元素

  $('<li></li>')

添加节点

  在元素尾部添加

    新元素.appendTo(目标元素)

    $('<li>国庆节</li>').appendTo($('#list'));

    目标.append(新元素)

  在元素头部添加

    新元素.prependTo(目标元素)

    目标.prepend(新元素)

    $('#list').prepend($('<li>元旦节</li>'))

  在目标元素之前插入

    新元素.insertBrfore(目标元素)

    $('<li>情人节</li>').insertBefore($('#list li').eq(2));

    目标元素.before(新元素)

  在目标元素之后插入

    新元素.insertAfter(目标元素)

    目标元素.after(新元素)

    $('#list li').eq(3).after($('<li>妇女节</li>'));

删除节点

remove():   将节点删除,返回被删除的节点,不会保留节点上的事件

detach():   将节点删除,返回被删除的节点,会保留节点上的事件

empty():    全部清空

克隆节点

clone()    复制节点及内容,但不保留节点上的事件

clone(true)复制节点及内容,保留节点上的事件

替换节点

新节点.replaceAll(要被替换的节点)

要被替换的节点.replaceWith(新节点)

$('#list li').eq(2).replaceWith($('<li>女神节</li>'));

数据串联

serialize()

<input type="text" name = 'a' value = '1'/>

<input type="text" name = 'b' value = '2'/>

<input type="text" name = 'c' value = '3'/>

$("input").serialize()// a=1&b=2&c=3

$("input").serializeArray()// [{{name: "a", value: "1"}}, {…}, {…}]

add 和 slice

$("div").add("span").add("ul li").css("backgroundColor", 'red')

// 等同于

$("div,span,ul li").css("backgroundColor", 'red')// 与add一样

 

$("ul li").slice(1, 4).css("backgroundColor", 'red');// 获取从1到4的 li元素

 

BOM 

元素的宽高

原生的元素的宽高分别那几种如何获取

    内容宽高----width  height

    可视宽高--- clientWidth/clientHeight

占位宽高---offsetWidth/offsetHeight

$("#div1").css("width")//"100px" 字符串

jq的元素宽高操作

    内容宽高  width()  height()  方法

    可视宽高  innerWidth()  innerHeight()

    占位宽高  outerWidth()  outerHeight()

    整个宽高 outerWidth(true)  outerHeight(true)

jq获取可视区及文档的宽高

    可视区宽高  $(window).width()/.height()

文档的宽高  $(document).width()/height()

元素的位置

$('#sub').offset() 返回一个对象   到文档的 left和top值

$('#sub').position() 返回一个对象  到有定位属性的父级元素的 left和top值

滚动条卷走的宽高操作

$(document).scrollTop() // 不传参获取,传参设置

 

事件

event对象

jq中的事件对象  不需要兼容了  直接传参ev就可以了

ev.clientX/ev.clientY  事件触发的位置到浏览器可视区的上左边的距离

ev.currentTarget:当前事件触发的元素

ev.delgateTarget:当前事件绑定的元素

ev.offsetX/ev.offsetY: 事件触发的位置到元素的上左边的距离

ev.originalEvent: 元素事件对象

ev.pageX/ev.pageY:事件触发的位置到文档的上左边的距离

ev.screenX/ev.screenY:事件触发的位置到屏幕的上左边的距离

ev.which  类似于  keyCode  可以获取鼠标的键值  左键是1  右键是3  滚轮是2

阻止默认事件  ev.preventDefault()

阻止冒泡 ev.stopPropagation()

阻止默认事件+冒泡  return false

事件绑定 on()

// 基本事件

$('#box').on('click',function(){})

// 一次绑定多个事件对应一个处理函数

$('#box').on('click mouseenter mouseleave',function(){})

 

// 绑定多个事件对应多个处理函数  对象形式

$('#box').on({

    'click': function(){},

    'dblclick':function(){}

})

 

// 自定义事件

$('#box').on('hahaha',function(){})

// trigger  触发事件

$('#box').trigger('hahaha');

 

// 事件委托

$('#list').on('click','li',function(ev){

    console.log($(ev.target).html());

})

 

// 事件的取消绑定

$('button:eq(0)').on('click', function(){

    console.log(1111);

})

 

$('button:eq(1)').on('click',function(){

    $('button:eq(0)').off();

    //$('button:eq(0)').off('mouseenter');

    // 传参取消事件类型

})

 

// 一个事件上绑定多个函数执行---事件的命名空间

$('button:eq(0)').on({

    'click.a':function(){

        console.log(111);

    },

    'click.b':function(){

        console.log(222);

    }

})

 

$('button:eq(1)').on('click',function(){

    $('button:eq(0)').off('click.a');

})

 

// 只执行一次的事件

$('button').eq(0).one('click',function(){

    console.log('一次就够了');

})

 

// 模拟执行一次事件

$('button').eq(0).on('click',function(){

console.log('一次就够了');

$(this).off();

})

合成事件

mouseenter 和mouseleave

$('#box').hover(function(){

    // 鼠标移入执行函数

},function(){

    // 鼠标移出执行函数

})

$ 下常用的方法

// 可以遍历数组,对象,jq元素

$.each(obj, function(key, value){

    console.log(key + ':' + value);

})

还可以$('选择器').each()//遍历元素  工具级别

 

var newArr = $.map(arr,function(item){

    return item * item * item; 

})有返回值

$.type()   输出当前数据类型   typeof

$.trim()    删除字符串前后的空格

$.inArray()    indexOf()

$.proxy()    功能类似于bind  $.proxy()

$.noConflict()  给$起个别名

$.parseJSON()   JSON.parse()

$.makeArray()    将伪数组转成数组。 Array.from()

动画

基本动画

显示隐藏

show(

    duration动画执行时间-毫秒,

    easing运动效果(只有两种  swing慢快慢,linear匀速, 

    complate运动执行完成后的回调)

)  

隐藏hide()  

显示隐藏的切换toggle()

$('#box').show(1000,function(){

    alert('执行完毕');

})

淡入淡出

淡入fadeIn()  淡出 fadeOut()  透明度变化到  fadeTo() 淡入淡出切换  fadeToggle()

$('button').eq(0).on('click', function(){

    $('#box').fadeIn(1000);

})

 

$('button').eq(2).on('click', function(){

    $('#box').fadeTo(1000, .5);

})

下拉显示

下拉显示slideDown()  上拉隐藏 slideUp()  切换 slideToggle()

$('button').eq(2).on('click', function(){

    $('#box').slideToggle(1000);

})

animate

animate({属性1:目标值1,属性2:目标值2.。。}, duration动画持续时间,easing动画效果,

callback回调)

// 累加

$('button').click(function(){

    $('#box').animate({width:'+=50'},200)

})

// 链式运动

$('button').click(function(){

    $('#box').animate({width:500},1000)

                .animate({height:300},500)

                .animate({opacity:.5},500)

})

动画队列

queue(function(next){})

将其他的操作加入到动画队列中 按顺序来完成

 

$('#box').animate({width:500},1000)

        .queue(function(next){

            $(this).css({background:'blue'});

            next();//继续执行后续的动画队列中的操作

        })

        .animate({height:300},500);

判断是否处于动画状态

$(元素).is(':animated') :有动画在执行  返回true  没有返回false

$('#box').hover(function(){

    if(!$(this).is(':animated')){

        $(this).animate({height:300},400);

    }

}, function(){

    $(this).animate({height:50},400);

})

延迟动画

$('#box').animate({width:500},1000)

        .delay(2000)

        .animate({height:300},500);

停止动画

stop(clearQueue清除动画队列, gotoEnd达到动画最终状态)停止动画

finish()完成动画---所有动画队列的效果达到最终状态(2.x以上版本支持)

// stop停止动画的几种组合

$('button').eq(1).click(function(){

    // 参数皆为false 不清除动画队列 不达到最终状态

    $('#box').stop(false, false); // 默认

    // 参数皆为true 清除动画队列 达到最终状态

    $('#box').stop(true, true);

    // true false 清除动画队列 不达到最终状态

    $('#box').stop(true, false);

    // false true 不清除动画队列 达到最终状态

    $('#box').stop(false, true);

})

// finish

$('button').eq(2).click(function(){

    $('#box').finish();

})

ajax

$.ajax({

    url,

    cache,//在get下是否启用缓存

    type,// get/post

    data,// 上传数据

    timeout,//相应超时时间

    datatype,//预期返回的数据类型默认 text

    success, // 成功回调

    error,

    conplate})

跨域

dataType 设置为jsonp

$.ajax({

    url:'https://www.baidu.com/sugrec',//?prod=pc&wd=aa&cb=fn

    type:'get',

    data:{prod:'pc',wd:'cc'},

    dataType:'jsonp',

    success:function(res){

        console.log(res);

    }

})

load方法

将url传入以后,将下载到数据直接填充到被选中元素的innerHTML中

$("div").load("2.txt #p1", function(data, statusText, xhr){

    data        下载到的数据

    statusText  下载的状态  success

    xhr         ajax对象

})

cookie

获取

$.cookie(name) 

设置

$.cookie(name, value) 设置name和value

$.cookie(name, value {

    raw: true  //value不进行编码

               //默认false value要进行编码的

})

删除

$.cookie(name, null); 删除cookie

 

实例

$.cookie("变种人", "X教授", {

    expires: 7,

    raw: true

})

jQuery 插件

;(function($){

    // 类级别插件 ---> 将方法拷贝到jq的原型下

    $.extend({

        'trimLeft' : function(str){

            return str.replace(/^\s+/,'');

        }

    })

    // 对象级别插件  拷贝到$.fn的原型下

    $.fn.extend({

        'changeBg' : function(select,color){

            this.children(select).css({background:color});

            return this;

        }

    })

})(jQuery)

 

var str = '        aaa      ';

 

console.log($.trimLeft(str));

$('ul').changeBg(':odd','pink');

Zepto

基本使用 和jq完全一样但是用到的模块要单独引入

$(function(){

    $('#box').on('tap', function(){

        console.log('手指点击');

    })

})

zepto和jq的区别

隐藏的元素的获取宽高

jq可以获取隐藏元素的width()/height()

zepto中获取隐藏元素的width()/height()都为0

$('#box').width();// 隐藏的元素在zepto中获取宽高为0

offset()的区别

jq中返回一个对象 包含 元素到文档上左边的距离

zepto中返回一个对象  包含 元素到文档上左边的距离和元素的宽高

$('#sub').offset();//元素到文档的上左边的距离

$('#sub').offset();//zepto中元素到文档的上左边的距离 和 元素的宽高

元素的宽高的获取区别

jq获取元素的宽 有4种方法

zepto中只有一个width()和height()方法 获取的是占位宽

$('#box').width();//占位宽  内容宽 + padding + border

innerWidth();//没有

outerWidth();//没有

outerWidth(true);//没有

touch模块

tap 所有的触碰

singleTap  手指单击

doubleTap  手指双击

swipe  swipeLeft  swipeDown   swipeRight  swipeUp  手指滑动

longTap 手指长按

posted on 2021-05-11 11:15  tomiaa  阅读(47)  评论(0编辑  收藏  举报