jQuery实践——属性和css篇
属性:
- attr
html:<div>demo1</div> jQuery:$("div").attr("id","demo1");
- removeAttr:
$("div").removeAttr("id");
- prop:
html:<input type="text" value="demo2"/> jQuery:$("input").prop("disabled",true);
- removeProp:
jQuery:$("input").removeProp("disabled");
- addClass:
css:.color{background: blue;} jQuery:$("div").addClass("color");
- removeClass:
$("div").removeClass("color");
- toggleClass:
jQuery:
$("div").click(function(){
$(this).toggleClass("color");
}); - html():
jQuery:$("div").html("<p>demo2</p>");
- text():
jQuery:$("div").text("demo3");
- val():
jQuery:console.log($("input").val());
- attr
css
- css:
jQuery:$("div").css("color","white");
- cssHooks:
csshooks:(function($) {
if(!$.cssHooks) {
throw("jQuery 1.4.3+ is needed for this plugin to work");
return;
} function styleSupport(prop) {
var vendorProp, supportedProp,
capProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = ["Moz", "Webkit", "O", "ms"],
div = document.createElement("div");
if(prop in div.style) {
supportedProp = prop;
} else {
for(var i = 0; i < prefixes.length; i++) {
vendorProp = prefixes[i] + capProp;
if(vendorProp in div.style) {
supportedProp = vendorProp;
break;
}
}
}
div = null;
$.support[prop] = supportedProp
return supportedProp;
}
var borderRadius = styleSupport("borderRadius");
// Set cssHooks only for browsers that
// support a vendor-prefixed border radius
if(borderRadius && borderRadius !== "borderRadius") {
$.cssHooks.borderRadius = {
get: function(elem, computed, extra) {
return $.css(elem, borderRadius);
},
set: function(elem, value) {
elem.style[borderRadius] = value;
}
};
}
})(jQuery); jQuery:$("div").css("borderRadius", "50%"); - offset:
html:<p>Hello</p><p>2nd Paragraph</p> console.log($("p:last").offset().left);
position:
html:<div id="demo2">
<p>demo2</p>
</div> console.log($("#demo2>p:first").position().top);scollTop:
console.log($("#demo2>p:first").scrollTop());
scollLeft:
console.log($("#demo2>p:first").scrollLeft());
height:
$("div").height(200);
- width:
$("div").width(200);
- innerHeight
- innerwidth
$("#demo3").innerWidth(50).innerHeight(50);
- outerHeight
- outerWidth
$("#demo3").outerWidth(150).outerHeight(150);
- css:
jQuery实践——属性和css篇的更多相关文章
- 【WEB前端开发最佳实践系列】CSS篇
一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺 ...
- 深入浏览器兼容 细数jQuery Hooks 属性篇
关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- jQuery实践——选择器篇
一.基本 #id: html:<div id="demo1">demo1</div> jQuery:$("#demo1").css( ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jQuery的简单用法(jQuery的简介,选择器,属性和css,文档处理)
一.jQuery简介 1.1. JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2. 当前流行的 JavaSc ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- vue 2.0 开发实践总结之疑难篇
续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1. vue 组件的说明和使用 2. vuex在实际开发中的使用 3. 开发实践总结 1. ...
随机推荐
- Python之路【第十九章】:Django 数据库对象关系映射
Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...
- [Bug] 解决透明 Activity 在 Android 6.0 背景不透明
如何复现 连续启动两个 Activity ,其中 Activity 1 为 不透明 的 Activity Activity 2 为 透明 的 Activity 通常用于引导页面,例如:豌豆夹锁屏引导用 ...
- Asp.Net Mvc4 Webapi Request获取参数
最近用mvc4中的WEBAPI,发现接收参数不是很方便,跟传统的request.querystring和request.form有很大区别,在网上搜了一大圈,各种方案都有,但不是太详细,于是跟踪Act ...
- (转)SVN服务器搭建和使用(一)
Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...
- Linux命令集合
系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...
- 记得初学JS时候练个九九乘法表都写的要死要活
还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...
- meta 标签的作用
META标签,是HTML语言HEAD区的一个辅助性标签.在几乎所有的page里,我们都可以看到类似下面这段htm l代码: <head> <meta http-equiv=" ...
- Html5shiv
说明编辑 越来越多的站点开始使用 HTML5 标签.但情况是还有很多人在使用IE6,IE7,IE8.为了让所有网站浏览者都能正常的访问网站, 2解决方案编辑 有下面两个: 为网站创建多套模板,通过程序 ...
- WCF入门-项目间调用服务
练习WCF入库,添加了一个WCF项目,同时添加了一个控制台程序,在控制台程序启动时,调用WCF服务,报错. 控制台程序代码为: namespace WcfConsumer { class Progra ...
- Oracle提示大全
Hint概述 基于代价的优化器是很聪明的,在绝大多数情况下它会选择正确的优化器,减轻了DBA的负担.但有时它也聪明反被聪明误,选择了很差的执行计划,使某个语句的执行变得奇慢无比. 此时就需要DBA进行 ...