首页 > 代码库 > jquery基础知识点总结

jquery基础知识点总结

Jquery是一个优秀的js库,它简化了js的复杂操作,不需要关心浏览器的兼容问题,提供了大量实用方法。
Jquery的写法
方法函数化
链式操作
取值赋值合体]
$(“p”).html();   取值
$(“p”).html(‘hello’);  赋值
(当一组元素的时候,取值是一组中的第一个,赋值是一组中的所有元素。)
Jqjs可以共存,不能混用
主要的筛选方法
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背景颜色会改变
filternot是针对当前元素的,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=http://www.mamicode.com/"111">
<
input type="submit" value=http://www.mamicode.com/"222">
<
input type="submit" value=http://www.mamicode.com/"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.which  :  keyCode  找键盘的键值  回车(13),可以记录鼠标的键值
阻止默认事件    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

jquery基础知识点总结