自己常用jq方法获取、改变dom值

简介: 自己常用jq方法获取、改变dom值

 

jquery获取、改变元素属性值

1. css == style

2. attr == input/button属性 

 

/标签的属性称作元素属性,在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);

 

js判断文件后缀方法

1.function validateSuf(str){
    var suffixs = "jpg,gif,jpeg,png";
    var suffix = str.toLowerCase().substr(str.lastIndexOf(".")+1,str.length);
    if(suffixs.indexOf(suffix) == -1){
      alert("上传格式有误,只允许上传"+suffixs+"文件");
    return false;
    }
 }

2.function stf( str){
   return ['jpg','png','jpeg','gif'].indexOf(str.split('.').pop().toLowerCase()) !== -1;
  }

目录
相关文章
|
7月前
|
JavaScript
jq样式、元素操作,效果,筛选方法与转换,事件对象
jq样式、元素操作,效果,筛选方法与转换,事件对象
|
7月前
|
JavaScript 前端开发
jQuery改变单个元素属性问题
div嵌套div改变外层div字体颜色保留内层div字体颜色出现同时改变的情况解决方案
87 6
jQuery改变单个元素属性问题
|
JavaScript 前端开发
带你彻底学会JS DOM技术之删除,复制,替换元素
参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。 1或true:表示复制元素本身以及复制该元素下的所有子元素。 0或false:表示仅仅复制元素本身,不复制该元素下的子元素。
239 0
带你彻底学会JS DOM技术之删除,复制,替换元素
|
JavaScript 前端开发 API
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
267 0
【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法
|
JavaScript 数据安全/隐私保护
DOM 修改属性简单操作
DOM 修改属性简单操作
185 0
|
JavaScript 前端开发
DOM(二)修改元素内容、属性
DOM(二)修改元素内容、属性
444 0
DOM(二)修改元素内容、属性
|
JavaScript 开发者
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
快速学习 jQuery_ 复制元素、DOM 插入到现有元素外
203 0
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
|
JavaScript 开发者
jQuery_DOM 移除、DOM 替换|学习笔记
快速学习 jQuery_DOM 移除、DOM 替换
304 0
jQuery_DOM 移除、DOM 替换|学习笔记
|
Web App开发 监控 JavaScript
使用DOM Breakpoints找到修改属性的Javascript代码
使用DOM Breakpoints找到修改属性的Javascript代码
263 0
使用DOM Breakpoints找到修改属性的Javascript代码
|
JavaScript
jQuery 手动触发 select 值改变
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82892933 ...
1581 0