请尊重知识,请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1 
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元素的方法

    jQuery DOM 元素方法 函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuer ...

  2. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  3. jQuery DOM XSS漏洞

    jQuery DOM XSS漏洞http://automationqa.com/forum.php?mod=viewthread&tid=2943&fromuid=21

  4. jQuery DOM操作之结点转移复制

    jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...

  5. JQuery DOM HighLighter (it's a basic "Inspect element" simple implementation to mimic what webkit inspector and firebug do)

    JQuery DOM HighLighter (it's a basic "Inspect element" simple implementation to mimic what ...

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

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

  7. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  8. 深度解析JQuery Dom元素操作技巧

    深度解析JQuery Dom元素操作技巧 DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了JQuery dom元素操作方法,写的十分的全面细 ...

  9. jQuery DOM 元素方法(get)

    jQuery DOM 元素方法 1..get() 获得由选择器指定的 DOM 元素. $(selector).get(index)index 可选.规定获取哪个匹配元素(通过 index 编号). 实 ...

随机推荐

  1. Android网络连接之HttpURLConnection和HttpClient

    1.概念   HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.在 JDK 的 java.net 包中 ...

  2. springMVC配置freemarker

    这里呢,我首先来说明一下写该篇的目的. 我最近要用到freemarker因此研究了一下这个东西. 先来说说如何配置吧. 1.jar包.地址见下链接. http://pan.baidu.com/s/1j ...

  3. LA 4998 Simple Encryption

    题意:输入正整数$K_1(K_1 \leq 50000)$, 找一个$12$位正整数$K_2$(不能含有前导零)使得${K_1}^{K_2}\equiv K_2(mod10^{12})$. 例如,$K ...

  4. android post请求

    参考文章:http://blog.csdn.net/lotusyangjun/article/details/22292445 http://blog.csdn.net/withiter/articl ...

  5. 精通 ASP.NET MVC 4 学习笔记(一)

    这里记录着从 P132 到 P192 的内容.水分很足,大部分是书上的代码,我只加了一些基于我自己的理解的能帮助初学者看懂的注释,并且把书中的部分内容做了一些的拓展. 建立数据层 设置 DI 容器 / ...

  6. ubuntu安装和查看已安装

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  7. winform中拖动功能实现技巧

    实现的需求,我通过拖动选中的用户行放到左边的机构节点上,从而实现用户改变组织机构的关系 贴代码 private DataGridViewSelectedRowCollection sourceRowC ...

  8. Git合并开发代码分支到测试代码分支

    ——转载请注明出自天外归云的博客园 用TortoiseGit下载代码到本地 首先需要在本机安装好TortoiseGit.然后在随便哪个路径下比如D盘,右键“Git Clone”: 然后URL处选择项目 ...

  9. HDU 4630 No Pain No Game 线段树 和 hdu3333有共同点

    No Pain No Game Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  10. 国内下Android源码地址

    1 Android 4.4 with kernel: http://pan.baidu.com/s/1bnuDtHt 下载后,请务必阅读 必读.txt 2 android 5.0源码下载 http:/ ...