前端学习JQuery篇05——基本操作(CSS)

CSS

css(name|pro|[,val|fn])1.9*访问或设置匹配元素的样式属性。

  • 一个参数为访问
  • 两个参数为设置

jQuery.cssHooks直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。

  • 它的目的是为了标准化 CSS 属性名或创建自定义属性。
  • 例如,某些版本基于Webkit的浏览器需要-webkit-border-radius属性来设置元素的border-radius, 而早期的Firefox版本使用-moz-border-radius属性。一个CSS hook 可以标准化这些有前缀的属性, 让.css() 接受一个单一的,标准的属性的名称(border-radius,或用DOM属性的语法,borderRadius)

位置

offset([coordinates])获取或设置匹配元素在当前浏览器窗口的相对偏移

  • 无参数为获取
  • 有{left:‘100‘,top:‘100‘}参数为设置

position()获取或设置匹配元素相对父元素的偏移。

  • 无参数为获取
  • 有{left:‘100‘,top:‘100‘}参数为设置
  • 返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

scrollTop([val])获取或设置匹配元素相对滚动条顶部的偏移

scrollLeft([val])获取或设置匹配元素相对滚动条左侧的偏移。

尺寸

height([val|fn])取得或设置第一个匹配元素当前计算的高度值(px)

  • 在 jQuery 1.2 以后可以用来获取 window 和 document 的高

width([val|fn])取得或设置第一个匹配元素当前计算的宽度值(px)

  • 在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

innerHeight()获取或设置第一个匹配元素内部区域高度(包括内边距、不包括边框)

  • 此方法对可见和隐藏元素均有效

innerWidth()获取或设置第一个匹配元素内部区域宽度(包括内边距、不包括边框)

  • 此方法对可见和隐藏元素均有效

outerHeight([options])获取或设置第一个匹配元素外部高度(默认包括内边距和边框)

  • 此方法对可见和隐藏元素均有效

outerWidth([options])获取或设置第一个匹配元素外部宽度(默认包括补白和边框)

  • 此方法对可见和隐藏元素均有效

原文地址:https://www.cnblogs.com/no-wing/p/9398581.html

时间: 2024-08-02 04:19:47

前端学习JQuery篇05——基本操作(CSS)的相关文章

Web前端学习第二篇

今天看到了一篇写的不错的文章,是有关对JQuery.js等一些源代码初识的内容,感觉写的还是不错,所以拿过来分享一下. 文章的地址:http://my249645546.iteye.com/blog/1716629 1.对(function(){})(); 几乎所有的开源js代码开篇都是这样(function(……){……})(……); 下面是Jquery的部分源码: (function( window, undefined ) { var jQuery = function( selector

前端学习 第五弹: CSS (一)

前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="mystyle.css" /> 外联 <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40

前端学习——JQuery Ajax使用经验

0.前言 在项目推进过程中经常使用Ajax,通过Jquery提供的函数可以非常方便的使用Ajax,但是在实际使用中也遇到一些问题,例如如何防止浏览器使用缓存,如何使用同步方式等.通过博文整理总结希望自身有所提高. 在这里通过一个加法例子说明问题.为了突出ajax,前端网页和后端PHP程序尽可能的简单. [前端]--add.html 图1 add页面 [后端]--add.php <?php // 返回JSON格式 header('Content-Type:application/json;char

前端学习(十一):CSS性质

进击のpython 前端学习--CSS性质 那在CSS上还有一些很重要的性质:继承性,层叠性以及特殊性 那本小节就基于这三个性质进行展开... ... 继承性 在CSS的某些样式是具有继承性的,那什么是继承性呢? 在官方上说,继承是一种规则,他允许样式不仅应用于特定的html标签元素,而且应用于其后代元素 如果你父亲是双眼皮,你母亲也是双眼皮,那你是双眼皮你就继承了父亲的双眼皮 那拿到我们实际的代码中应用呢? <!DOCTYPE html> <html lang="en&quo

前端学习(九):CSS基础

进击のpython 前端学习--CSS基础 CSS的样式可以写在哪呢?其实CSS的样式插入式十分灵活的 按照插入的形势来看,可以分为三种情况 而接下来就对这三种情况进行简单的讨论 内嵌式 CSS样式表是可以直接把代码放在现有的标签里面去的 这种方法就称为内嵌式: <p style='color:red;'>文字颜色为红色</p> 把对应的style属性,写在p标签的开始标签中 CSS样式代码要写在style=""双引号中,如果有多条CSS样式代码设置可以写在一起

前端学习(十):CSS选择器

进击のpython 前端学习--CSS选择器 每一条CSS样式声明由两部分组成: 选择器{ 样式: } 在CSS中{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象 也就是说该"样式"作用与网页中的哪些元素 那选择器就分为:基础选择器和高级选择器 基础选择器 标签选择器 标签选择器顾名思义就是html代码中的标签 我们之前学习的html.body.h系列的标签.p.div.img等等我们都可以使用标签选择

前端学习(八):CSS

进击のpython 前端学习--CSS 现在的互联网前端分为三层: HTML:超文本标记语言.从语义的角度描述页面结构 CSS:层叠样式表.从审美的角度负责页面样式 JS:Javascript.从交互的角度描述页面的行为 所以说HTML,CSS,JS也被称为前端三剑客 CSS是一个很神奇的东西,设计者可以通过修改样式表的定义从而使我们的网页呈现出完全不同的外观 也就是说,CSS其实就是网页的衣服,将网页打扮的"花里胡哨" 初识CSS CSS全称为''层叠样式表'(记住这个名字会对你后面

前端学习(十三):CSS盒子模型

进击のpython 前端学习--CSS盒子模型 在前面的时候也说过,包括分析网页结构的时候,提到了,网页就其实就是一个一个盒子叠起来的 那现在就是有装饰的盒子,难度就变得深刻 所以说为了能够让你更好地理解,在说盒子模型之前,我要先向你介绍一下标签 对!就是html里面的那些标签 标签分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(也叫行内元素)和内联块元素 html标签甚至有好几百个,我们之前学习大约有30个标签,你所看到的很多大型网站我们都能通过这些标签来搭

前端学习---jquery

本部分主要记录jquery的  '选择器'  'dom操作'  'ajax': 1:'语法': jquery的基本语法:$(selector).action() $符号:定义jquery    selector:选择器,用于查找html元素   action() 方法:对元素的操作 如:$('p').hide():隐藏所有<p>标签 说明:文档加载就绪的函数 实际的项目中所有的jquery函数都位于 document ready 函数中:这是一个文档加载就绪的函数,为了防止文档在加载就绪 之前