jQuery2

来源:互联网 发布:淘宝怎样关店 编辑:程序博客网 时间:2024/05/05 17:50

jQuery DOM 操作

$("#btn1").click(function(){  alert("Text: " + $("#test").text()); //设置或返回所选元素的文本内容});$("#btn2").click(function(){  alert("HTML: " + $("#test").html());  //设置或返回所选元素的内容});$("#btn1").click(function(){  alert("Value: " + $("#test").val()); //获得输入字段的值});$("button").click(function(){  alert($("#w3s").attr("href")); //获得链接中 href 属性的值});

设置内容 - text()、html() 以及 val()

$("#btn1").click(function(){  $("#test1").text("Hello world!");//设置或返回所选元素的文本内容});$("#btn2").click(function(){  $("#test2").html("<b>Hello world!</b>");//设置或返回所选元素的内容(包括 HTML 标记)});$("#btn3").click(function(){  $("#test3").val("Dolly Duck");//设置或返回表单字段的值});$("button").click(function(){  $("#w3s").attr({    "href" : "http://www.w3school.com.cn/jquery",    "title" : "W3School jQuery Tutorial" //attr() 方法也允许您同时设置多个属性  });});

添加/删除元素

$("p").append("Some appended text."); //在被选元素的结尾插入内容$("p").prepend("Some prepended text."); //在被选元素的开头插入内容$("img").after("Some text after");//在被选元素之后插入内容。$("img").before("Some text before");//在被选元素之前插入内容$("#div1").remove();//删除被选元素及其子元素$("#div1").empty();//删除被选元素的子元素

获取并设置 CSS 类

$("button").click(function(){  $("h1,h2,p").addClass("css类");  $("div").addClass("css类");});$("button").click(function(){  $("#div1").addClass("important blue");//同时多个类});$("button").click(function(){  $("h1,h2,p").removeClass("blue");//删除指定的 class 属性});$("button").click(function(){  $("h1,h2,p").toggleClass("blue");//切换添加删除});$("p").css("background-color");//返回首个匹配元素的 background-color 值$("p").css({"background-color":"yellow","font-size":"200%"});//设置或返回被选元素的一个或多个样式属性

尺寸

$("button").click(function(){  var txt="";  txt+="Width: " + $("#div1").width() + "</br>";  txt+="Height: " + $("#div1").height();  $("#div1").html(txt);});$("button").click(function(){  $("#div1").width(500).height(500);});

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距);
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距);
innerWidth() 方法返回元素的宽度(包括内边距);
innerHeight() 方法返回元素的高度(包括内边距);
outerWidth() 方法返回元素的宽度(包括内边距和边框);
outerHeight() 方法返回元素的高度(包括内边距和边框);
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距);
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

原创粉丝点击