jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
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获取位置信息的更多相关文章
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
- js操作css样式、js的兼容问题
一.js操作css样式 div . style . width="200px" 在div标签内我们添加了一个style属性,并设定width值.这种写法会给标签带来大量的style ...
- Cleave.js – 自动格式化表单输入框的文本内容
Cleave.js 有一个简单的目的:帮助你自动格式输入的文本内容. 这个想法是提供一个简单的方法来格式化您的输入数据以增加输入字段的可读性.通过使用这个库,您不需要编写任何正则表达式来控制输入文本的 ...
- JS操作CSS样式
一.样式表(css) 使用样式表可以更好的显示WEB文档,也可以结合javascript从而实现很好的控制样式表. 样式(css)与内容(html): HTML是处理文档结构的,HTML可以实现如何把 ...
- js操作css样式,null和undefined的区别?
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- Js 通过点击改变css样式
通过js 点击按钮去改变目标原始的背景颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- JS操作css样式用法
//html <div id="div1" style="background:red;"> 修改背景颜色 </div> <but ...
- 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作
HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel=" ...
- js中css样式
1.js操作css样式 例如 div . style . width=“100px”. 就是在div标签内我们添加一个style属性,并设定了width值,这种写法会给标签带来大量的style属性,跟 ...
随机推荐
- 查看SQL Server服务运行帐户和SQL Server的所有注册表项
查看SQL Server服务运行帐户和SQL Server的所有注册表项 SELECT * FROM sys.dm_server_registry SELECT * FROM sys.dm_serve ...
- 记一次 c 语言 的 多线程查找 简单实现
//仅供参考学习 1 #define _CRT_SECURE_NO_WARNINGS //屏蔽 vs 的a #include <stdio.h> #include <stdlib.h ...
- Bootstrap table 行编辑导航
/*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...
- iOS多线程GCD的使用
1. GCD 简介 Grand Central Dispatch(GCD)是异步执行任务的技术之一.一般将应用程序中记述的线程管理用的代码在系统级中实现.开发者只需要定义想执行的任务并追加到适当的Di ...
- Linux Mint如何添加windows分享的网络打印机?
1.安装samba sudo apt-get install samba 2.找到系统打印机选项 通过 Menu-->>控制中心-->>系统管理找到 Printers选项,双击 ...
- Conway生命游戏
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/9986679.html 作者:窗户 Q ...
- 在Winform开发框架中对附件文件进行集中归档处理
在我们Winform开发中,往往需要涉及到附件的统一管理,因此我倾向于把它们独立出来作为一个附件管理模块,这样各个模块都可以使用这个附件管理模块,更好的实现模块重用的目的.在涉及附件管理的场景中,一个 ...
- 记录使用nodejs时,未正确使用import导致的错误
2019/04/08 今天看了es6入门,才发现以前碰到的关于import的错误,是因为使用了import,但nodejs默认不支持导致的. 如果想要使用es6的module功能,需要把整个文件的导入 ...
- 身份认证功能chiro的使用
package com.cun;import org.apache.shiro.SecurityUtils;import org.apache.shiro.authc.*;import org.apa ...
- 转:互斥锁解决同时上传数据丢失BUG
互斥锁:在一个线程修改变量时加锁,则其他变量阻塞,等待加锁的变量解锁后再执行,避免数据覆盖或者其他的异常情况. 原子操作: 所谓原子操作是指不会被线程调度机制打断的操作:这种操作一旦开始,就一直运行到 ...