JQuery元素操小结

//标签的属性称作元素属性，在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。

//==================================操作元素属性==================================

//返回元素指定属性值

var txt1_val=$("#txt1").attr("value");

//通过元素的DOM属性名更改DOM属性值

$("#txt1").attr({ value : "txt1_value" , className : "txt1_class" });

//通过指定元素属性改变元素属性值

$("#txt1").attr("class","txt1_class2");

//给指定元素属性赋值，通过后面捆绑的方法返回值

$("#txt1").attr("class",function(){

return "txt1_class3";

})

//移除指定的元素属性

$("#txt1").removeAttr("class");

//==================================修改CSS类==================================

//给CSS类即class元素属性添加一个属性值，可以添加多个之间用空格分开以下的对CSS类操作函数同样可以填入多个CSS类

$("#txt1").addClass("txt1_class txt1_class2");

//判断是否已有该CSS类，返回真假

$("#txt1").hasClass("txt1_class txt1_class2");

//移除指定CSS类，用空格分开，如无指定则删除该元素所有CSS类

$("#txt1").removeClass("txt1_class");

//判断是否有这个CSS类，有就删除，没有就添加

$("#txt1").toggleClass("txt1_class");

//根据后面的返回真则添加此CSS类，假则删除此CSS类

$("#txt1").toggleClass("txt1_class",false);

//==================================修改CSS属性==================================

//返回指定CSS样式值

$("#txt1").css("color");

//一次赋多个样式

$("#txt1").css({color:"#ff0011",background:"blue"});

//一次赋一个指定的样式

$("#txt1").css("color","black");

//==================================宽和高相关==================================

//设置元素的高度，无值则返回该元素的高度单位像素

$("#txt1").height(25);

//设置元素的宽度，无值则返回该元素的宽度

$("#txt1").width(150);

//获取元素的内部高度，不包括边框

$("#txt1").innerHeight();

//获取元素内部宽度，不包括变宽

$("#txt1").innerWidth();

//获取元素外部高度，包括边框

$("#txt1").outerHeight();

//获取元素外部宽度，包括边框

$("#txt1").outerWidth();

//==================================位置相关==================================

//获取元素相对窗口的偏移位置，返回两个值，一个top值，一个left值

var txt1_offset=$("#txt1").offset();

var top=txt1_offset.top;

var left=txt1_offset.left;

//返回相对父元素的相对偏移位置，返回两个值一个top，一个left

var txt1_position=$("#txt1").position();

var top=txt1_position.top;

var left=txt1_position.left;

//针对的元素具有垂直滚动条，设置从总体内容向下的第20行像素开始，显示在滚动条可视窗口内上方顶端

//如无参数，则返回当前滚动条可视窗口上方顶点位置，距离整体内容上方顶点的距离

$("#div_outer").scrollTop(20);

//针对的元素具有横向滚动条，设置从总体内容左侧的第20列像素开始，显示在滚动条可视窗口内左端顶点

//如无参数，则返回当前滚动条可视窗口左端顶点位置，距离整体内容左端顶点的距离

$("#div_outer").scrollLeft(20);

转载于:https://blog.51cto.com/8486002/1388145

JQuery元素操小结相关推荐

jQuery 元素操作——遍历元素
jQuery 元素操作主要是遍历.创建.添加.删除元素操作 <!DOCTYPE html> <html lang="en"><head>< ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
jquery元素节点操作
jquery元素节点操作创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...
jquery元素插入、删除、清空
1)jquery元素插入位置1)表示元素前:$("#test").before(--); 位置2)表示元素内前:$("#test").prepend(--); ...
jQuery元素操作-遍历元素
1.jQuery元素操作 1.1.遍历元素-语法1 主要遍历dom对象 <!DOCTYPE html> <html lang="en"> <head& ...
jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
JavaWeb开发前端语言：jQuery（一） jQuery核心函数、jQuery对象、jQuery选择器、以及jQuery元素筛选
JavaWeb开发前端语言:jQuery 1.jQuery介绍 1.1 jQuery的初使用 1.2 使用jQuery的常用问题解析 2. jQuery核心函数介绍 3.区分jQuery对象与dom ...
html picker插件,jQuery元素选择器插件-multiPicker
一款jQuery元素选择器插件-multiPicker,可以用于星期.月份.语言等小范围的选择,有多种不同的选择方式,演示效果了可以自由体验,个人觉得实用性还是挺强的,喜欢的就收下吧. 查看演示下载 ...
【JQuery元素属性】
JQuery元素属性元素属性 attr removeAttr prop removeProp 元素属性 attr 设置或返回被选元素的属性值 <img src="https://ss ...

JQuery元素操小结

JQuery元素操小结相关推荐

最新文章

热门文章