一、在jQuery中,对元素的操作包括3个方面:
(1)属性操作;
(2)内容操作;
(3)样式操作;
一、属性操作
(1)获取元素属性;
{
$().attr("属性名");
}
(2)设置元素属性;
{
$().attr("属性","属性值");
}
(3)删除元素属性;
{
$().removeAttr("属性");
}
//区分attr()与prop()方法,attr()方法是用来操作标签所固有的属性
prop()方法用来操作用户自定义类型,removeAttr(),removeProp()同理
二、内容操作
//关于元素内容操作共有2组方法:
(1)html()和text();
{
1>html()
用html()方法来获取和设置某个元素中的“HTML内容”。
$().html() //获取HTML内容
$().html("HTML内容"); //设置HTML内容
//html()方法跟JavaScript中的innerHTML()是一样的效果,只不过html()是jQuery的实现方式,innerHTML()是JavaScript的实现方式。
//设置html内容的时候会覆盖原来的html内容
//例:
$("#p2").html("<strong>jQuery入门教程</strong>");
//此时显示的是加粗的 jQuery入门教程
2>text()
使用text()方法来获取和设置某个元素的“文本内容”。
$().text() //获取文本内容
$().text("文本内容") //设置文本内容
//text()方法跟JavaScript中的innerText是一样的效果,只不过text()是jQuery的实现方式,innerText是JavaScript的实现方式。
//设置text内容的时候会覆盖原来的text内容
//例:
$("#p2").text("<strong>jQuery入门教程</strong>");
//此时显示的是 <strong>jQuery入门教程</strong>
//区分:
获取:
html会获取到标签及其中的文本,text只会获取到其中的文本
设置:
html会将标签翻译,text只是将其中的内容当成纯文本,而不翻译
}
(2)val();
{
表单元素的值都是通过表单元素的value属性来传递的
$().val() //获取表单元素
$().val("表单元素的值") //设置表单元素
//表单元素:
<input>、<textarea>、<select>和<option>,其中<select>和<option>是配合使用的。
//例:
$("#txt2").val("jQuery入门教程");
}
//其中html()和text()用于操作普通标签,而val()用于操作表单标签。
样式操作(一)
三、CSS属性操作
(1)CSS属性操作;
{
$().css("属性")//获取CSS属性值
$().css("属性","属性值")//设置单个CSS属性值
$().css({"属性1":"属性值1","属性2":"属性值2",……})//设置多个CSS属性值
//例:$("ul li:nth-child(odd)").css("color","red");
//在CSS中没有设置的属性,同样可以设置,也就是说这个属性操作是获取、设置和更改
}
(2)CSS类名操作;
{
//所谓的“CSS类名操作”类名操作其实就是为元素添加某个类名、删除某个类名、切换某个类名。
1>添加类名
$().addClass("类名")
2>删除类名
$().removeClass("类名")
3>切换类名
$().toggleClass("类名")
//toggleClass()方法用于检查元素是否具有某个类名。如果类名不存在,则为该元素添加类名;如果类名已存在,则为该元素删除类名。
//相当于某一个样式的有与无,两种状态
//区分:
$(selector).toggle(speed,callback,switch)
{
//如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
speed:可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "0"。
speed可能的值:
毫秒 (比如 1500)
"slow"
"normal"
"fast"
//在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数,则无法使用 switch 参数。
callback:可选,toggle 函数执行完之后,要执行的函数。除非设置了 speed 参数,否则不能设置该参数。
switch:可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
True - 显示所有元素
False - 隐藏所有元素
如果设置此参数,则无法使用 speed 和 callback 参数。
}
$(selector).slideToggle(speed,callback)
{
//slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。
speed:可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。
可能的值:
毫秒 (比如 1500)
"slow"
"normal"
"fast"
//在设置速度的情况下,元素在切换的过程中,会逐渐地改变其高度(这样会创造滑动效果)。
callback:可选。toggle 函数执行完之后,要执行的函数。除非设置了 speed 参数,否则不能设置该参数。
}
}
(3)获得和设置宽度和高度
{
方法一:
//获得高度的方法可以用第一种获得css属性的方法
即:$().css("width");$().css("height")
方法二:
//以下是jQuery提供的简单的方法:
(1)$().width();$().height()
{
//获得的是元素的内容宽度和高度
}
(2)$().innerWidth();$().innerHeight();
{
//获得的是元素的内容宽度(高度)+padding
}
(3)$().outerWidth();$().outerHeight()
{
//获得的是元素的内容宽度(高度)+padding+border
}
//注意一点,只有$().width(),$().height()方法可以用于window或document对象。
//对$().width();$().height()
{
$().width();$().height() //获取元素的宽度(高度),返回值是一个数值不带单位
$().width(n) 或 $().width("n") 或 $().width("npx") //设置元素的宽度,n是一个整数,表示npx
}
//对$().css("width");$().css("height");
{
$().css("width");//获取元素的宽度,返回值是npx,带单位
$().css("width","npx");或$().css("width","n")或$().css("width",n)//设置元素的值,n是一个整数
}
}
//高度和宽度的操作完全一样
样式操作(二)
四、获取元素位置
获取元素的位置,有2种方法:
(1)$().offset();//相对于浏览器窗口
{
//可以使用offset()方法用于“获取”或“设置”元素相对于“当前文档”(也就是 浏览器窗口 )的偏移距离。
//也就是说这个数据是实时的,是元素相对于当前浏览器窗口的位置
$().offset()
//返回的是一个坐标对象,该对象有2个属性:top和left。
分别获得:
$().offset().top;
$().offset().left;
//返回值都是数字,不带单位
//更改元素位置:
$(selector).offset({top:value,left:value});
或
$().css("position","absolute");
$().css({"top":"value","left":"value"});//传入的是一个json对象
//在设置这些样式的时候,是类似于json数组的,即前面的键名是可以不带双引号的,但是后面的值必须得带双引号,当然当值为纯数字的时候就可以不带双引号,例:$().css("top",50);或$().css("top","50px");
}
(2)$().position();//相对于祖辈定位元素
{
//可以使用position()方法来“获取”或“设置”当前元素相对于“其被定位的祖辈元素”的偏移距离。
$().position()//返回的是一个坐标对象,该对象有2个属性:top和left。
分别获取:
$().position().top//表示元素相对于被定位的祖辈元素的顶部的垂直距离。
$().position().left//表示元素相对于被定位的祖辈元素的左部的水平距离。
//以上方法获得的都是数字,不带单位
//注意,以上方法,用在已被定位的元素(当前元素)相对于其父级上已被定为的元素的距离,即当前元素中的left,top值。如果当前元素不是被定位的元素,则会出现错误,错误原因,本人道行尚浅。。。
}
样式操作(三)
五、获取滚动条位置
//可以使用scrollTop()来获取或设置元素相对于垂直滚动条顶部的距离,可以使用scrollLeft()来获取或设置元素相对于水平滚动条左部的距离。
$().scrollTop() //获取滚动距离(垂直)
$().scrollTop(value) //设置滚动距离(垂直)
$().scrollLeft() //获取滚动距离(水平)
$().scrollLeft(value) //设置滚动距离(水平)
//value是一个数字
例:
$(window).scroll(function () {
//当滚动条距离大于box2距离顶部的距离时,设置固定定位
if ($(this).scrollTop() > top) {
$("#box2").css({ "position": "fixed", "top": "0" });
}
//当滚动条距离小于于box2距离顶部的距离时,设置相对定位
else {
$("#box2").css({ "position": "relative" });
}
});
//如何理解滚动条距离:
即在一开始滚动条不动的时候$().scrollTop()是零
现在存在一个div高度是1000px;但是窗口只有400px;在一开始的时候$().scrollTop()是零,后来滚动条向下滚动,相当于div相对于窗口向上移动,这时div在窗口上方不可见的部分就是滚动条已滚动的距离,即$().scrollTop()。就是窗口的顶端相对于滚动开始位置之间的距离。
//如果要设置“回到顶部”这个功能:只需要这样设置$().scrollTop(0)