jq选择器（jq 与 js 互相转换）

// 获取所有的页面元素jq对象

    $('css3选择器语法');

    var $box = $(".box:nth-child(1)");  获取的是jq对象数组

// 拿到指定的页面元素jq对象

    $('css3选择器语法').eq(index);

    var $box = $(".box").eq(1);      获取的是jq对象数组

// jq 转 js  （ jq对像就是由数组包裹的js对象 ）

    box1 = $box[0] 从数组里取出来

    box1 = $box.get(0) 从数组里取出来

// js 转 jq

    $box1 = $(box1);

jq操作css样式 / 文本内容

$(".box").eq(1).text("100")   // jq获取标签内容,修改标签内容

$(".box").eq(1).text("100").html("<b>xxx</b>")      // jq支持链式操作

$(".box").eq(1).css("color","red")     // 修改css样式操作

$(".box").eq(1).css("font-size","30px") 

$(".box").eq(1).css({    // 已字典的形式添加css样式

    color:"red",

    "font-size":"30px",

})

$(".box").eq(1).css("border-radius")   // jq能获取计算后样式

jq操作类名

addClass  |  removeClass

$(".box").eq(1).addClass("red")    // 添加类名

$(".box").eq(1).removeClass("red")    // 删除类名  jq链式操作
$(".box").eq(1).addClass("red").removeClass("red")   // jq链式操作

jq操作全局属性

$("img").attr("src","/img/1.js")；  // 设置属性

$("img").attr("src")；   // 查看全局属性

$("img").removeAttr("src")；   // 删除全局属性


jq获取盒子信息




$(".box").width();

$(".box").height();  宽高

$(".box").innerWidth();  内边距 + 宽高

$(".box").outerWidth();  边框 + 内边距 + 宽高

$(".box").outerWidth(true);  外边距 + 边框 + 内边距 + 宽高




位置信息 offset |




// 相对窗口偏移: 算margin产生的距离

console.log($('.box').offset().top, $('.box').offset().left);

// 绝对定位偏移(top,left): 不算margin产生的距离

console.log($('.box').position().top, $('.box').position().left);


												




											
jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息的更多相关文章
	

    
								
  1. 11-13  js操作css样式
		
    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符.  ...
    
		
    2. 
						
  2. js操作css样式、js的兼容问题
		
    一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
    
		
    3. 
						
  3. Cleave.js – 自动格式化表单输入框的文本内容
		
    Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...
    
		
    4. 
						
  4. JS操作CSS样式
		
    一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
    
		
    5. 
						
  5. js操作css样式，null和undefined的区别？
		
    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
    
		
    6. 
						
  6. Js 通过点击改变css样式
		
    通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
    
		
    7. 
						
  7. JS操作css样式用法
		
    //html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
    
		
    8. 
						
  8. 利用JS脚本通过getAttribute（）和setAttribute（）等对CSS样式进行操作
		
    HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...
    
		
    9. 
						
  9. js中css样式
		
    1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 无限极分类（adjacency list）的三种方式（迭代、递归、引用）
			
    一般的分类树状结构有两种方式: 一种是adjacency list,也就是是id,parent id这中形式. 另一种是nested set,即左右值的形式. 左右值形式查询起来比较高效,无需递归等, ...
    
			
    2. 
						
  2. PMM Client 安装异常报错
			
    1.PMM架构 如下图所示 2.Client主要组件 PMM Client是安装在你要监视的MySQL或MongoDB主机上的一组代理组件.组件收集关于一般系统和数据库性能的各种数据,并将该数据发送到 ...
    
			
    3. 
						
  3. Git-初始化配置及SSH_key配置
			
    step1.安装完Git,执行检查是否安装成功:git --version step2.配置全局变量 配置完执行检查:git config --list step3.生成SSH_KEY 如果报ssh- ...
    
			
    4. 
						
  4. 智表ZCELL产品V1.4.0开发API接口文档 与 产品功能清单
			
    为了方便大家使用ZCELL,应网友要求,整理编写了相关文档,现与产品一起同步发布,供大家下载使用,使用过程中如有疑问,请与我QQ联系. 智表(ZCELL)V1.4.0版本  功能清单文档下载地址: 功 ...
    
			
    5. 
						
  5. MySQL replace into （insert into 的增强版）
			
    在使用SQL语句进行数据表插入insert操作时,如果表中定义了主键,插入具有相同主键的记录会报错:  Error Code: 1062. Duplicate entry 'XXXXX' for ke ...
    
			
    6. 
						
  6. Activiti开发案例之代码生成工作流图片
			
    图例 环境 软件 版本 SpringBoot 1.5.10 activiti-spring-boot-starter-basic 6.0 生成代码 以下是简化代码: /** * 查看实例流程图,根据流 ...
    
			
    7. 
						
  7. ABP之模块系统
			
    简介 ASP.NET Boilerplate提供了构建模块的基础结构,并将它们组合在一起以创建应用程序. 模块可以依赖于另一个模块. 通常,一个程序集被视为一个模块. 如果创建具有多个程序集的应用程序 ...
    
			
    8. 
						
  8. ABP之调试
			
    虽然通常情况下不需要,但是Abp还是提供了能在调试项目中进入Abp源码的方法.. 所有的ABP NuGet包都启用了源码连接.这意味着我们可以在我们的项目中调试ABP源码,要启用它,更改Visual  ...
    
			
    9. 
						
  9. 普通PC通过USB转485串口 ModBus-RTU通信协议控制伺服电机
			
    一.RS485通信 RS485 是半双工通信(2 线制),可以一点对多点进行组网,而且 RS485 是用缆线两端的电压差值来表示传递信号,这与 RS232 电气特性大不一样.RS485 仅仅规定了接收 ...
    
			
    10. 
						
  10. [转帖]EXPDP dumpfile和parallel的关系
			
    http://blog.itpub.net/28602568/viewspace-2133375/ 转帖 EXPDP 里面 parallel 与 dumpfile 里面的文件数的关系. 但是我这里有一 ...
    
			
    11.