jQuery学习笔记(二)通过事件触发 实现对HTML和CSS的[得/增/删/改]

原创 2013年12月06日 10:32:25

上一节介绍了怎么用jQuery获取所需的HTML元素,取到手之后当然就是怎么操作这些标签了。本篇就来介绍一下如何对HTML元素中的内容进行获取或更改。

那么jquery实现的到底是个怎样的过程呢?

比如说,当你触发一个事件(点击一个按钮)的时候,jQuery语句就能【得到】/【修改】某些【tag中的文本】或【tag的属性】,或者通过修改【CSS属性】同时改变多个tag的属性



以下表格中的内容,实现前提是写在如下的框架中。即点击id=“button”的按钮时,触发备注中的各种内容

$(document).ready(function(){

  $("#button").click(function(){

//获取tag内容/属性;改变tag内容/属性;使用回调函数  

    });

});




【HTML元素】



内容(tag内) 属性(tag中)
获得 $("#test").text()//id=“text”的标签
$("#test").html()
$("#test").val()//表单的值
$("#w3s").attr("href")
设置 $("#test").text("hello world")
$("#test").html("<p>hello world</p>")
$("#test").val("Dolly")
一个:
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
多个:
$("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });


//后面“”里的内容赋值给前面“”里的tag属性

回调函数   $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });


//回调函数就是可以【返回】你想要的文本内容
//获取id=“text”的tag中的文本,并对文本内容进行回调函数内的内容
//回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值

  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
添加 $("p").append("Some text");//在<p>后面添加文本(在<p>tag之内)
$("p").prepend("Some text");//在<p>前面添加文本(在<p>tag之内)
$("img").after("Some text");//在<img>后面添加文本(在<img>之外的后面)
$("img").before("Some text");//在<img>前面添加文本(在<img>之外的前面)

//也可以添加多段文本(以上方法都可以接收无限量参数):
var txt1="aaaa"; var txt2="bbbb";
$("p").append(txt1, txt2);

删除 $("#div1").remove();//删除id="div1"的元素及其子元素
$("#div1").empty();//删除id="div2”的子元素

$("p").remove(".italic");//带有过滤功能的删除:删除class="italic"的<p>及其子元素
 





【CSS属性】

接下来是对CSS属性的操作。

jquery对CSS的操作,可以在触发某些动作(如点击一个按钮)时对网页中的某些tag增/删/改属性。

四类操作 实例
addClass() $("button").click(function(){
  $("h1,h2,p").addClass("blue");//向<h1>/<h2>/<p>的HTMLtag添加.blue的css属性
  $("div").addClass("important"); //向<div>的HTMLtag添加.importan的csst属性
  $("#div1").addClass("important blue");//对一个tag添加多个属性
});


removeClass() $("button").click(function(){
  $("h1,h2,p").removeClass("blue");//从<h1>/<h2>/<p>的HTMLtag移除.blue的css属性
});

toggleClass() $("button").click(function(){
  $("h1,h2,p").toggleClass("blue");//轮换:点一下按钮增加.blue属性,再点一下就移除.blue属性
});

css() $("p").css("background-color");//返回页面中第一个匹配到<p>的tag的background-color属性

$("p").css("background-color","yellow"); //设置页面中第一个匹配到<p>的tag的background-color属性为yellow

$("p").css({"background-color":"yellow","font-size":"200%"});//设置多个属性
 





【尺寸】

width()
height()
(得到元素长宽)
$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});
innerWidth()
innerHeight()
(包括内边距)
$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});
outerWidth()
outerHeight()
(包括内边距+边框)





outerWidth(true) 
outerHeight(true) 
(包括内边距+边框+外边距)
$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

$("button").click(function(){
  var txt="";
  txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});


得到HTML文档/浏览器窗口尺寸 $("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "\n";//HTML文档
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();//浏览器窗口
  alert(txt);
});
设置尺寸 $("button").click(function(){
  $("#div1").width(500).height(500);//设置id为div1的尺寸
});



版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

jQuery学习笔记:DOM操作(二)——属性、类、HTML、CSS

属性操作获取属性和设置属性attr() 如果要获取属性,那么给attr()方法传递一个参数,即属性名称。 $("img").attr("src"); 如果要设置属性,那么就传递两个参数,即属性名和对应...

菜鸟学习笔记——jQuery中.css(),.each(),.append(),.html()方法总结

1、$(selector).css() 1)$(selector).css(name),返回css的属性值。如:$("p").css("color"),返回p的color值; 2)$(select...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

HTML+CSS+JavaScript+JQuery+JSP学习笔记

HTML标签 1.段落 2.换行 3.标题--  字体由大到小 4.水平线 5.注释 6.(加粗  倾斜  不常用)    7.下标  上标 8.预格式文本  用的不多...

html和css实现一级菜单和二级菜单学习笔记

实现一级菜单二级菜单:

jQuery学习笔记(二)基础事件

一.绑定事件 在JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseove...

jQuery学习笔记(二)选择器 事件

选择器: $(document).ready(function() { $("button").click(function() { $("p").css("background-c...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)