首页 > 代码库 > jquery基础知识点总结
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=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>
<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基础知识点总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。