jQuery HTML

来源：互联网发布：linux扩大home空间编辑：程序博客网时间：2024/05/16 09:37

才疏学浅，之总结了这些函数：

1.获得 text(),html(),val()

text() //设置或返回对应元素中的文本信息

html() //设置或返回对应元素的文本信息(包含文本中的HTML标记)

val() //设置或返回字段的值

以val为例子:

alert("Value: " + $("#test").val());

$("#test").val("your input");

2.text(),html(),val()的回调函数

回调函数有两个参数：被选元素列表中当前元素的下标，

以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

Example:

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});

3.设置属性： attr()函数

Example：

  $("#id").attr("href","http://www.123456.com");//改变元素中href的值
  $("#id").attr({
  "href" : "http://www.123456.com",
"font-color" : "red"
});//改变元素中多个属性的值

$("#id").attr("href", function(i,origValue){//其中origValue是原始的值
return origValue + "123";
});//用回调函数改变href中的值

4.向HTML中添加心得元素

append() //在被选元素的结尾插入元素
prepend() //在被选元素的开头插入元素
affer() //在被选元素的后面插入元素
before() //在被选元素的前面插入元素

下面以append为例：

$("#id").append("enter text") //插入文本信息
var text = document.createElement("p").innerHTML = "my String!!";
$("#id").append(text); //插入新的元素

5.删除元素

remove() //删除选中的元素
empty() //清空选中元素的所有子元素
Example:
$("#id").remove("#the id you want to remove")
//参数不仅仅是ID，也可以是class，选择器的参数都可以
$("#id").empty() //清空制定ID下的所有子元素

6.JQuery操作css

addClass() //向指定元素添加一个或多个class.对应的是 removeClass()
toggleClass() //进行remove和add之间的切换
css() //设置或者返回css样式属性
下面以addClass()为例：
  $("#id").addClass("className className1 className2");
//向制定元素中添加1个或者多个类，两个参数之间用空格分开
  $("#id").css("background-color");  //返回对应属性名的值
  $("#id").css("background-color","red"); //设置对应属性的值
  $("#id").css("background-color":"red" , "font-size":"12px");
//设置多个属性的值

7.JQuery尺寸方法

width() //方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() //方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() //方法返回元素的宽度（包括内边距）

innerHeight() //方法返回元素的高度（包括内边距）
outerWidth() //方法返回元素的宽度（包括内边距和边框）
outerHeight() //方法返回元素的高度（包括内边距和边框）

0 0