属性:

    1. attr

      html:<div>demo1</div>
      
      jQuery:$("div").attr("id","demo1");

    2. removeAttr:
      $("div").removeAttr("id");

    3. prop:
      html:<input type="text" value="demo2"/>
      
      jQuery:$("input").prop("disabled",true);

    4. removeProp:
      jQuery:$("input").removeProp("disabled");

    5. addClass:
      css:.color{background: blue;}
      
      jQuery:$("div").addClass("color");

    6. removeClass:
      $("div").removeClass("color");

    7.  toggleClass:
      jQuery:
      $("div").click(function(){
      $(this).toggleClass("color");
      });
    8. html():
      jQuery:$("div").html("<p>demo2</p>");

    9. text():
      jQuery:$("div").text("demo3");

    10. val():
      jQuery:console.log($("input").val());

  css

    1. css:

      jQuery:$("div").css("color","white");

    2. 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%");

    3. offset:
      html:<p>Hello</p><p>2nd Paragraph</p>
      
      console.log($("p:last").offset().left);
    4. position:

      html:<div id="demo2">
      <p>demo2</p>
      </div> console.log($("#demo2>p:first").position().top);
    5. scollTop:

      console.log($("#demo2>p:first").scrollTop());
    6. scollLeft:

      console.log($("#demo2>p:first").scrollLeft());
    7. height:

      $("div").height(200);
    8. width:
      $("div").width(200);

    9. innerHeight
    10. innerwidth
      $("#demo3").innerWidth(50).innerHeight(50);

    11. outerHeight
    12. outerWidth
      $("#demo3").outerWidth(150).outerHeight(150);

  

jQuery实践——属性和css篇的更多相关文章

  1. 【WEB前端开发最佳实践系列】CSS篇

    一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺 ...

  2. 深入浏览器兼容 细数jQuery Hooks 属性篇

    关于钩子:http://www.cnblogs.com/aaronjs/p/3387906.html 本章的目的很简单,通过钩子函数更细节的了解浏览器差异与处理方案, 版本是2.0.3所以不兼容ie6 ...

  3. jQuery修改class属性和CSS样式

    jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...

  4. jQuery实践——选择器篇

      一.基本 #id: html:<div id="demo1">demo1</div> jQuery:$("#demo1").css( ...

  5. JQuery DOM操作 、属性和CSS样式操作、其他函数

    DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...

  6. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  7. jQuery的简单用法(jQuery的简介,选择器,属性和css,文档处理)

    一.jQuery简介 1.1.  JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2.  当前流行的 JavaSc ...

  8. (转)面向属性的CSS命名

    原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...

  9. vue 2.0 开发实践总结之疑难篇

    续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1. ...

随机推荐

  1. Python之路【第十九章】:Django 数据库对象关系映射

    Django ORM基本配置 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去 ...

  2. [Bug] 解决透明 Activity 在 Android 6.0 背景不透明

    如何复现 连续启动两个 Activity ,其中 Activity 1 为 不透明 的 Activity Activity 2 为 透明 的 Activity 通常用于引导页面,例如:豌豆夹锁屏引导用 ...

  3. Asp.Net Mvc4 Webapi Request获取参数

    最近用mvc4中的WEBAPI,发现接收参数不是很方便,跟传统的request.querystring和request.form有很大区别,在网上搜了一大圈,各种方案都有,但不是太详细,于是跟踪Act ...

  4. (转)SVN服务器搭建和使用(一)

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  5. Linux命令集合

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  6. 记得初学JS时候练个九九乘法表都写的要死要活

    还记得当初刚接触JS时候,看到视频中老师写了个九九乘法表,觉得好神奇,可是自己在下面动手写了半天还是有各种问题,甚是懊恼啊.今又看到园子里有关于乘法表的博文,出于对过去的不舍与缅怀,遂重写一遍. &l ...

  7. meta 标签的作用

    META标签,是HTML语言HEAD区的一个辅助性标签.在几乎所有的page里,我们都可以看到类似下面这段htm l代码: <head> <meta http-equiv=" ...

  8. Html5shiv

    说明编辑 越来越多的站点开始使用 HTML5 标签.但情况是还有很多人在使用IE6,IE7,IE8.为了让所有网站浏览者都能正常的访问网站, 2解决方案编辑 有下面两个: 为网站创建多套模板,通过程序 ...

  9. WCF入门-项目间调用服务

    练习WCF入库,添加了一个WCF项目,同时添加了一个控制台程序,在控制台程序启动时,调用WCF服务,报错. 控制台程序代码为: namespace WcfConsumer { class Progra ...

  10. Oracle提示大全

    Hint概述 基于代价的优化器是很聪明的,在绝大多数情况下它会选择正确的优化器,减轻了DBA的负担.但有时它也聪明反被聪明误,选择了很差的执行计划,使某个语句的执行变得奇慢无比. 此时就需要DBA进行 ...