jquery基础知识点总结

Jquery是一个优秀的js库，它简化了js的复杂操作，不需要关心浏览器的兼容问题，提供了大量实用方法。

Jquery的写法

方法函数化

链式操作

取值赋值合体]

$(“p”).html();   取值

$(“p”).html(‘hello’);  赋值

（当一组元素的时候，取值是一组中的第一个，赋值是一组中的所有元素。）

Jq与js可以共存，不能混用

主要的筛选方法

has()   not()   filter()

next()   prev()    find()   eq()   index()    attr()   indexOf()

Attr()   对属性进行操作，给元素添加属性且赋值，或者取得某个属性的值。

   $(“div”).attr(‘title’,’123’);

        <div title=”123”></div>

Filter()   对一组元素进行筛选，过滤

满足条件的会被留下来

$(‘div’).filter(‘.box’).css(‘background’,’red’);

含有box类的div背景颜色会改变

Not()   filter的反义词

       $(‘div’).not(‘.box’).css(‘background’,’red’);

       不含有box类的div背景颜色会改变

（filter和not是针对当前元素的，has是针对元素里面的内容的）

Has()  包含的意思

                    $(".box").has('#ul').css("background","#ccc");

        $(“.box”).has(span).css(“background”,“red”);

Next()  找到当前元素的下一个兄弟节点

Prev()  找到当前元素的上一个兄弟节点

Find()   查找

$(‘div’).find(‘h2’).css(‘background’,’red’);

eq()   获得对应下标的元素

         $(‘div’).find(‘h2’).eq(1).css(‘background’,’red);

Index();   获得当前元素的索引。索引就是当前元素在所有兄弟节点中的位置

$(‘#h’).index();

编写选项卡

<input type="submit" value="111">
<input type="submit" value="222">
<input type="submit" value="333">
<div id="div">
    <div class="active">111</div>
    <div>222</div>
    <div>333</div>
</div>

<script>
    $(function(){
        $("input").click(function(){
            var i=$(this).index();
            $("#div div").eq(i).show().siblings().hide();
        });
    });

</script>

Jquery中常用的属性操作方法

addClass()

   添加类名

$(‘div’).addClass(‘box2 box3’);

removeClass()   

         删除类名

$(‘div’).removeClass(‘box2 box3’);

width()   

         获取元素的宽度，不包含padding

Height()

         获取元素的高度

innerWidth()  

         获取元素不包含变宽的宽度(包含padding)

outerWidth()

         获取元素外的宽度，包含padding  border

         outerWidth(true)  (包含padding,border,和margin)

节点操作常用方法

insertBefore()  插入到节点的前面（动词）剪切的功能

$(‘span’).insertBefore($(‘div’));

<span>1213</span>

<div>2345</div>

before()      节点的前面插入某元素（名词）

insertAfter()    插入到节点的后面（动词）(原生js中没有这个方法)

         $(‘div’).insertAfter($(‘span’));

         <span>1213</span>

         <div>2345</div>      

after()        节点的后面插入某元素（名词）

appendTo()

         插入到节点内部所有子节点的后面（动词形式）

append()  （名词形式）

prependTo()

插入到节点内部所有子节点的前面（动词形式）

prepend() （名词形式）

区别（后续操作不一样，）

$(‘span’).insertBefore($(‘div’)).css(‘background’,’red’);

$(‘div’).before($(‘span’)).css(‘background’,’red’);

remove()    删除节点

on()

$(‘div’).on(‘click mouseover’,function(){

     Alert(123);

})

自定义事件,也可以写多个事件，来针对一个操作

         $(‘div’).on({

                   ‘click’:function(){

                   Alert(123);

},

‘mouseover’:function(){

         Alert(456);

         $(‘div’).off(‘mouseover’);

}

});

off()  关闭它的所有事件操作

scrollTop() 获取滚动条的滚动距离

         $(document).click(function(){

                   Alert($(window).scrollTop());

})

弹窗(popup)，动态创建

创建标签

关键点，弹框的位置，绝对定位，position : absolute;

Left:  (窗口宽度 - 弹框宽度)/2；

Top:  (窗口的高度 – 弹框的高度)/2 + 滚动条的高度；

监听窗口大小变化和滚动事件

$(window).on(‘resize scroll’,function(){

         

})

事件细节

Event对象，对事件细节进行操作

  ev  :兼容后的even对象

ev.pageX  (相对于文档的)

ev.clientX  (相对于可视区，可视区加上滚动条距离就是pageX)

ev.pageY  (相对于文档的)

ev.clientY  (相对于可视区的)

），可以记录鼠标的键值

阻止默认事件    ev.preventDefault();

阻止冒泡的操作  ev.stopPropagation();   return  false; // 阻止默认事件 +阻止冒泡的操作

One()   表示事件只执行一次

$(‘div’).one(‘click’,function(){

         alert(123);

})

offset()   获取元素距离屏幕的距离

$(‘div’).offset().left

$(‘div’).offset().top

Position()  获取元素距离父元素的距离，元素被定位，margin不算，只能是left值，

                     到有定位的父级的left值，把当前元素转化成类似定位的形式

$(‘div’).position().left;

$(‘div’).position().top;

parent()   获取父级

offsetParent()   获取有定位的父级

val()

$(‘input’).val();

size()   获取一组元素的长度，像length

$(‘li’).size();

each()   相当于原生的for()循环  each()当中可以接受回调函数

$(‘li’).each(function(下标，元素)){

}

$(‘li’).each(function(I,elem){

         $(elem).html(i);

})

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>

一参（下标），二参（每个元素）

编写拖拽

$(window).width()             //浏览器当前窗口可视区域宽度,不包含滚动条

$(window).height()            //浏览器当前窗口可视区域高度，不包含滚动条

$(document).width()         //浏览器当前窗口文档对象宽度，不包含右边的滚动条的宽度

$(document).height()           //浏览器当前窗口文档的高度，包含了滚动条的高度

alert($(document.body).width());                //浏览器当前窗口文档body的宽度

alert($(document.body).height());                //浏览器当前窗口文档body的高度

$(document.body).outerWidth(true)     //浏览器当前窗口文档body的总宽度 包括border padding margin

$(document.body).outerHeight(true)    //浏览器当前窗口文档body的总高度 包括border padding margin