Jquery的学习（2）

最新推荐文章于 2024-08-09 02:16:38 发布

原创最新推荐文章于 2024-08-09 02:16:38 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

37 篇文章

订阅专栏

JQuery的CSS相关

.height() 得到元素高度或者设置元素高度
.innerHeight() 得到元素的高度，包括padding，但是不包括border
.innerWidth() 得到元素的宽度，包括padding，但是不包括border
.offset() 得到元素相对于文档中的坐标，用left和top表示，
outerwidth()和outerHeight() 可以得到元素的宽高，包括padding border和选择性的border，参数为true则包含margin，默认为false。
.position() 获取到当前元素的坐标位置，会生成position.left和position.top两个属性
scrollTop()和scrollLeft() 匹配选择元素的滚动条位置

<div></div>
<footer></footer>
//JQuery.js
//--------------height------------
$("div").height("500");
var height=$("div").height();
console.log(height);//500
//-----------innerHeight()----------
   $("footer").css({
        "height":"500px",
        "padding-top":"100px"
    })
    var height=$("footer").innerHeight();
    console.log(height);
//------------offset-------------
var ofset1=$("p:first-of-type").offset();
    console.log(ofset1);
    var ofset2=$("p:last-of-type").offset({
        "left":8,
        "top":65
    })
//------------position---------
    var position=$("footer").position();
    console.log(position);

事件部分

blur() 失去焦点时触发的事件（此事件不支持冒泡）;
change() 元素值改变时触发的事件
click() 点击事件
dbclick() 双击触发事件
mouseup()和mousedown() 两个事件组合起来构成了一个click事件
focus() 元素获得焦点时触发的事件
focusin() 在元素或者其内部任何元素获得焦点的时候触发的事件
focusout() 在元素或其内部任何元素失去焦点的时候触发的事件
hover() 元素被鼠标滑过时触发的事件
mouseenter() 鼠标进入时触发的事件，只有在指定元素上才会触发的事件
mouseleave() 鼠标离开时触发的事件，同上
mousemove() 鼠标移动时触发的事件
mouseout()和mouseover() 也是鼠标进入离开触发的事件，本质上的不同是他们支持冒泡，也就是说鼠标离开他们的子元素也会触发这个事件
on和off绑定和移除事件

on和off是Jquery来添加事件的一种方法
$.on(type,selector,data,func)，off和on的参数相同，selector是过滤器属性，data是event.data的值
one() 为元素绑定一个只执行一次的事件
ready() 当DOM文档加载完成后指定一个函数执行 ready(handler)；
scroll() 当元素滚动时触发的事件
trigger() 绑定一个事件到一个元素上，根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

<select>
    <option>hello</option>
    <option>hi</option>
    <option>world</option>
</select>
<input type="text">
<span>hello,world</span>
<div></div>
//jquery.js
$("select").change(function(){
    var str="";
    str+=$("select option:selected").text();
    $("div").text(str);
})
//--------focus()---------
$("span").css("display","none");
$("input").focus(function(){
    $("span").css("display","inline").fadeOut(1000);
})
//--------------scroll-----------
$(window).scroll(function(){
    var scrollNum=$(window).scrollTop();
    console.log(scrollNum);//滚动条的位置值
})