jQuery DOM基础
1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text().
  • html()  html(value)设置和获取html内容,有html标签会自动解析。
  • text() text(value)  设置和获取文本内容,有html标签会自动转义。
  • val() val(value)  设置和获取表单文本内容
  • 设置单选、复选框和下拉列表的被选定状态:可以通过数组传递操作
$('input').val(['男','女']);//value值是这些的将被选定。
2.获取、设置属性值
 
$('#box').attr('id');//获取#box的ID属性的值:box
 
$('div').attr('title', '我是域名');//设置div的title属性值:我是域名
 
$('div').attr({
     'title' : '我是域名',
     'class' : 'red',    //通过对象传递键值对的方式,设置多个属性值。class不建议用attr来设置,后面有功能更强大和更丰富的方法代替
     'data' : '123'
});
 
$('div').attr('title', function (index, value) {
     return '原来的title是:' + value + ',现在的title是:我是' + (index+1) + '号域名';
});        //通过函数返回值来设置属性值。函数可传递两个参数,value为原来的属性值,index为div的索引,如果有多个div的话,index就有用。
 
$('div').html(function (index, value) {
    return value +  '<em>www.li.cc</em>';
});  //同理,html也可以通过函数返回值来设置html内容。
 
$('div').removeAttr('title');  //删除属性。
 
3.css操作方法
  • $('div').css('color'); //获取元素行内 CSS 样式的颜色
  • $('div').css('color', 'red'); //设置元素行内 CSS 样式颜色为红色
  • var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
$.each(box, function (attr, value) {          //遍历 JavaScript 原生态的对象数组
               alert(attr + ':' + value);
               });
 
$('div').each(function (index, element) {     //jQuery对象的数组遍历方法。index 为索引,element 为元素 DOM
     alert(index + ':' + element);
});
  • 多个css样式,可以通过传递对象键值对的方式
 
$('div').css({
     'background-color' : '#ccc',
     'color' : 'red',
     'font-size' : '20px'
});
  • 一般需要计算得到的值,通过函数返回值设置。
$('div').css('width', function (index, value) { //index为第几个div,value为原始值
     return (parseInt(value) - 500) + 'px';
})
  • 添加、删除class
- $('div').addClass('red'); //添加一个 CSS 类
- $('div').addClass('red bg'); //添加多个 CSS 类
- $('div').removeClass('bg'); //删除一个 CSS 类
- $('div').removeClass('red bg'); //删除多个 CSS 类
 
  • 我们还可以结合事件来实现 CSS 类的样式切换功能。
- $('div').click(function () { //当点击后触发
-      $(this).toggleClass('red size'); //单个样式多个样式均可。默认样式和指定样式之间的切换(默认样式即浏览器本身的样式)。
- });
width()和height()方法:
$('div').css('width')=$('div').width()+'px'    //区别:第一个有单位,第二个没有单位
$('div').width(function(index,value){
     return value-500+'px'   //通过匿名函数的返回值赋值。px可以不加。
});
 
内外边距和边框尺寸方法:
alert($('div').width()); //不包含
alert($('div').innerWidth()); //包含内边距 padding
alert($('div').outerWidth()); //包含内边距 padding+边框 border
alert($('div').outerWidth(true)); //包含内边距 padding+边框 border+外边距 margin
 
元素偏移方法:

$('strong').offset().left; //相对于视口的偏移
$('strong').position().left; //相对于父元素的偏移
$(window).scrollTop(); //获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置

jQuery DOM基础的更多相关文章

  1. jQuery~DOM基础操作

    操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...

  2. jQuery DOM

    请尊重知识,请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1  jQuer ...

  3. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

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

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

  5. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  6. jQuery 插件基础

    jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...

  7. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  8. jQuery官方基础教程笔记(转载)

    本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...

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

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

随机推荐

  1. 天大acm 题号1002 Maya Calendar

    Description 上周末,M.A. Ya教授对古老的玛雅有了一个重大发现.从一个古老的节绳(玛雅人用于记事的工具)中,教授发现玛雅人使用了一个一年有365天的叫做Haab的历法.这 个Haab历 ...

  2. raw_input() 与 input()

    这两个均是 python 的内建函数,通过读取控制台的输入与用户实现交互.但他们的功能不尽相同. >>> raw_input_A = raw_input("raw_inpu ...

  3. c#读取Excel的列名问题

    在修改c#读取Excel的时候,遇到了一些小问题,总结下,希望别人不用再浪费时间 读取excel的时候,如果是空行就不读取? SELECT * FROM [DB_ESTATE$] where F2&l ...

  4. Android 读取Assets中资源

    //读取文件 private static String getFromAssets(Context context, String fileName) { String result = " ...

  5. 如何将vs2012项目的网站布置到iis上,实现内网访问

    1首先获得你本机的ip地址 可以通过命令行输入 ipconfig/all 2配置电脑的iis(前提是你已经安装了) 右击我的电脑选择管理 右键网站添加网页 会出来上面的对话框 选择直接的项目web路径 ...

  6. csharp通过dll调用opencv函数,图片作为参数

    [blog 项目实战派]csharp通过dll调用opencv函数,图片作为参数          ​一直想做着方面的研究,但是因为这个方面的知识过于小众,也是由于自己找资料的能力比较弱,知道今天才找 ...

  7. Poj(1469),二分图最大匹配

    题目链接:http://poj.org/problem?id=1469 COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  8. 数据库查询优化器的艺术:原理解析与SQL性能优化

    数据库查询优化器的艺术 作者:李海翔 Oracle公司MySQL全球开发团队.资深专家 简单的浏览了一遍,由于以前没有接触过SQL优化这些知识,读起来还是非常吃力的,不过收获还是很大的. 作者通过对M ...

  9. invoke和beginInvoke

    首先说下,invoke和begininvoke的使用有两种情况: 1. control中的invoke.begininvoke. 2. delegrate中的invoke.begininvoke. 这 ...

  10. ADO.NET增删改-------跟查不一样

    建立数据库 create database ren go use database go create table user ( code nvarchar(20) primary key,--编号 ...