码迷,mamicode.com
首页 > Web开发 > 详细

Jquery介绍

时间:2017-11-19 02:07:35      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:hit   name   offset   replace   dex   坐标   size   pen   ddr   

一、获取和设置HTML属性

attr()方法

$("form").attr("action");

二、获取和设置css属性

$("h1").css("fontWeight");
$("div.note").css("border","1px solid black");
$("div.note").css({
    backgroundColor:"black",
    textColor:"white"
})

三、获取和设置CSS类

addClass():添加类

removeClass():删除类

toggleClass():当元素还没有这个类,给元素添加类;反之,则删除

hasClass():用来判断某个类是否存在

四、获取和设置HTML表单值

val()方法用来获取和设置HTML表单元素的value属性,还可以用于获取和设置复选框、单选按钮以及<select>元素的选中状态

$("username").val()
$("username").val("Invalid email address")

五、设置和获取元素内容

text()和html()方法用来获取和设置元素的纯文本或HTML内容。当不带参数调用时,text()返回所有匹配元素的所有子孙文本节点和纯文本内容。

var title = $("head title").text();
var handline = $("h1").html()
    $("h1").text(function (n,current) {
        return "$"+(n+1)+": "+current
    });

六、获取和设置元素的位置高宽

offset()可以设置和获取元素的位置。该方法计算位置值,返回一个对象,带有left和top属性,用来表示X坐标和Y坐标。如果传入带参数,他就会给元素设置指定的位置。

$ ("h1").offset(function (index,curpos) {
    return {left:curpos.left+25*index,top:curpos.top};
})

注意:

width()和height()方法返回基本的宽度和高度,不包含内边距、边框和外边距。

innerWidth()和innerHeight()返回元素的宽度和高度,包含内边距的宽度和高度(“内”表示这些方法度量的是边框以内的尺寸)。

outWidth()和outHeighht()通常返回的是包含元素内边距和边框的尺寸。如果向两个方法中的任意一个传入true值,他们还会返回包含元素外边框的尺寸。

var body = $("body");
var contentWidth = body.width();
var paddingWidth = body.innerWidth();
var borderWidth = body.outerWidth();
var marginWidth = body.outerWidth(true);

scrollTop()和scrollLeft(),可以获取和设置元素的滚动条的位置。

function pade(n) {
    var w = $(window);
    var pagesize = w.height();
    var current = w.scrollTop();
    w.scrollTop(current+n*pagesize);
}

七、获取和设置元素数据

data()和removeData()

$("div").data("z",1);
$("div.nodata").removeData("x");

八、插入和替换元素

$("#log").append("<br />"+message);/*在#log元素的结尾处添加元素*/
$("h1").prepend("OK")/*在每个<h1>的起始处添加*/
$("h1").before("<hr />")/*前面*/
$("h1").after("<hr />")/*后面*/
$("h1").replaceWith("<hr />")/*替换*/

 

Jquery介绍

标签:hit   name   offset   replace   dex   坐标   size   pen   ddr   

原文地址:http://www.cnblogs.com/QianBoy/p/7858273.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!