jQuery

JS入口函数与JQ入口函数的区别？

jq的入口函数(两种)

第一种：

$(document).ready(function(){

        console.log('a');

      });

第二种：

$(function(){

        console.log($('div'));

       });

js的入口函数

window.onload=function(){

        alert(1);

       });

区别：

①js的入口函数比jq的入口函数慢一些，js要等页面所有内容加载完成之后执行，jq等页面结构(节点)加载完成之后就会执行；

②js的入口函数后面的会执行前面的，而jq的入口函数则不会覆盖。

JS与JQ的转化？

var oDiv = document.getElementById("div1");   //js元素

js--->jq  //给获取的元素增加$即可

var $div = $("#div1");

jq--->js    //jq是类数组,所以有下标有长度,可以通过下标的方式拿到js

var $js = S("#div1")[0];

JQuery中$的含义？

$就是一个函数,$(),有三种用法,参数不同功能不同。

①参数是一个function,也就是入口函数;

    $(function(){

     });

console.log(typeof $);

②$(obj)把js对象转化为jq对象的写法;

③$("字符串")用来找对象的--->$("div ul li")

选择器

子代、后代、交集、并集、id 、class、tagname

过滤选择器和筛选选择器

过滤选择器：在获取元素字符串之间添加

$("li:eq(0)").css("background","red");

筛选选择器：是方法，在获取元素字符串之外使用

$("li").eq(0).css("background","yellow");

$('ul').children().css('background','green');

children()    :找子代

find()           :找后代

parent()       :找父元素

siblings()     :找兄弟

next()          :下一个兄弟

prev()          :上一个兄弟

eq()             :通过指定下标获取元素

JQ中单个样式和多个样式的设置

$(function(){

//even   代表下标为偶数的，odd 代表下标为奇数的

 

//css(属性，值), 设置单个属性

// $('li:even').css('background','red');

// $('li:odd').css('background','yellow');

// $('li:lt(4)').css('background','green');

// $('li:gt(6)').css('background','yellow');

 

//css({属性:值,属性:值}) 设置多个属性，用对象的方式

$('li').css({

'background':'red',

'fontSize':'40px',

});

//css(属性名)  获取属性

console.log($('li').css('background'));

index()获取元素下标

$(function(){

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

        alert($(this).index());

    });

});

三组基本动画：

//   show()/hide()/toggle()

// fadeIn()/fadeOut()/fadeToggle();

// slideDown()/slideUp()/slideToggle();

show(),可以传参，如果不传递参数，代表没有动画执行。

// 传参可以传数值，比如1000 代表1秒钟执行完动画，还可以传递字符串，比如：normal(正常)，fast(快速)，slow(减速)

 

自定义动画

animate()四个参数

第一个参数：动画执行的方式，比如：{left:100}；

第二个参数：speed；

第三个参数：执行的效果，比如：linear,swing;

第四个参数：回调函数；

$('#ipt1').click(function () {

    $('div').show().animate({ left: 300 }, 3000, 'linear', function () {

    console.log('向右移动完成');

    });

});

停止动画

stop()  clearQueue---是否清楚动画队列   true

            jumpToEnd---是否跳转到当前动画的最终结果

小例子：

 

<script>

 

    $('#ipt1').click(function(){

        $('div').slideDown(1000).slideUp(1000);

    });

    $('#ipt2').click(function(){

        $('div').stop(true,true);

    });

</script>

创建元素

// $('#box').append('<ul><li></li></ul>');

把一个现有的标签添加的指定的标签中

// $('p').appendTo($("#box"));

创建p标签并添加到div中

$('<p></p>').text( $('textarea').val()).appendTo($('div'));

 

val()； 获取输入框的值

$('textarea').val())；

 

append /appendTo     添加的标签为父子关系

//创建一个div，同时把div插入到box中

//  $('body').append('<div></div>');

//  $('div:eq(1)').appendTo($('#box'));

 after /before   添加的标签为兄弟关系

// $('p').before('<span></span>');

// $('p').after('<ul></ul>');

remove() 清除元素

// $('ul li:eq(2)').remove();

empty()   清空内容

// $('ul li:eq(2)').empty();

// $('ul li:eq(2)').text('');

// $('ul li:eq(2)').html('');

获取元素位置

width();height(); 如果不传参数，则是获取元素宽度，给参数，则是设置元素的宽度/高度

// $('div').width();

// console.log($('div').width(500));

innerWidth()   元素的width+padding

outerWidth() 元素的width+padding+border

outerWidth(true) 元素的width+padding+border+margin

scrollLeft()    卷去的宽度

offset() 元素相对于document的偏移    

position() 如果有父元素，则是相对于父元素的偏移

事件代理/委托:要给某个元素注册事件,但执行者不是代理方而是最终元素

//delegate() 代理、委托

// 第一个参数：事件最终的执行者，

// 第二参数：触发事件

// 第三个参数：要做什么事情  

$('#box').delegate('p','click',function(){

    alert('呵呵');

})

//on()    一共是4个参数

// 1：事件类型

// 2.选择器（给谁注册事件）

// 3.data（事件对象event）

// 4.fn  (要做的事情)

 

 

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

//阻止冒泡传播

// e.stopPropagation();

alert('下雨了吗');

})

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

$('<p>我是新增加的p标签</p>').appendTo($('#box'));

})

jq中on()的解绑

//off(); 解绑on方法的绑定事件

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

console.log('哈哈');

$('#box p').on('mouseover', function () {

console.log('123');

})

$('#box p').off('mouseover');

})

jq中delay()延迟方法

        $('input').on('click',function(){

                // $('div').css('display','block');

                $('div').fadeIn(1000).delay(3000).fadeOut(2000);

            });

jq中each()遍历

       //循环添加背景图片

    $('li').each(function(index,element){

        //  console.log(index);//索引值

        //  console.log(element);//每个元素

        $(element).css('background','url(imgs/'+(index+1)+'.jpg)')

        $(element).css('backgroundSize','100%')

    });

jq中解决$冲突    $noConflict()

jq懒加载

<body>

<div></div>

<img class="lazy" data-original="./images/01.jpg" alt="">

</body>

<script src="./jquery-1.12.4.js"></script>

<script src="./jquery.lazyload.js"></script>

<script>

    $ (".lazy").lazyload ();

</script>

jq中设置多个类名和属性

jq方法设置多个类名  addClass   保留之前的样式，增加新样式

$('ul li').eq(7).addClass('a');//增加类名

$('ul li').eq(7).removeClass('a');//删除类名

$('ul li').eq(7).hasClass('a');//有没有类名

console.log($('ul li').eq(9).hasClass('d'));//返回值为布尔类型

// toggleClass   切换类名

attr(属性，值)  设置单个属性

//attr({

       // 属性:值，

       // 属性:值，

   // })

   // attr(属性);  获取属性值

$('img').attr('title','我是通过attr改变的');

$('img').attr({

'alt':'老鼠',

'title':'attr改变',

});

//prop()    用法与attr是一样的，只是prop用来设置布尔值类型的属性    

// input的几个属性  type：checked， disabled selected

$('#ipt').prop('chicked','true');

console.log($('#ipt2').prop('checked'));