您的位置：首页 > Web前端 > JQuery

a毛 jquery 学习记 5 基础DOM和CSS操作1

2016-04-17 08:54 681 查看

jquery 学习五(1) 基础DOM和CSS操作

参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、

拷上次笔记到文件夹到'5基础DOM和CSS操作1'中，

一．DOM 简介

由于课程是基于 JavaScript 基础上完成的，这里我们不去详细的了解 DOM 到底是什么。只需要知道几个基本概念：

1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点

2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在 jQuery 中并不需要深刻理解它。

3.树形结构用来表示 DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。

二、设置元素及内容

先了解下表

index.html 页面内容

<body>
<div>
<strong> www.csdn.com</strong>
</div>
</body>

html()

$(function(){

//alert($('#box').html()); //获取HTML 所有内容；包括标签等；
    //alert($('#box').html("www.baidu.com"))  //设置html内容为www.baidu.com
    //alert($('#box').text()); //获取div元素中的文本内容，会自动清理 html标签
    //alert($('#box').text("今天天气不错")); //
//$('#box').text('<strong>今天天气不错</strong>');//设置文本内容，会自动转义 html 标签

注意，当使用.html()和.text()来设置元素里在的值时，会清空原来的值，如果要保留原来的值需要先获取，然后在追加新的值；

例如：

$(function(){
$('#box').text($('#box').text() + '我有一个家');
});

val() 获取表单内容

修改index.html如下：增加如下代码

<form>
输入姓名：<input type='text'/>
</form>

$(function(){

 $('input').val('原生极乐');//设置表单中input 信息；
alert($('input').val());//显示表单数据 ；
 });

单选，复选的选定，如下

index.html 页面增加如下内容

<form>
          输入姓名：<input type='text'/> <br/>
           <input type='radio' id = 'manId' value='男'/>男
           <input type='radio' value='女'/> 女 <br/>
           <input type='checkbox'   value = 'fruitVal'/>水果
           <input type='checkbox' value='electricalVal' /> 电器 <br/>
           
        </form>

$(function(){
$('input:radio#manId').val('奇'); // 把男改为奇 注意：改的值是valu值，
$('input:checkbox:first').attr('checked','true');  //选择第一个复框

  //val值可以传一个数组，value是这些值的将被选定
  $('input').val(['男','女','fruitVal','electricalVal']);

  });

上面的方式同样适用于下拉列表，复选框等等

三．元素属性操作

先看下表了解一下

index.html页面内容如下

<body>
<div id='box'>
<strong> www.csdn.com</strong>
</div>
</body>

$(function(){
alert($('#box').attr('id'));//获取属性ID为box的值
});

index.html

<body>
<div >
<strong> www.csdn.com</strong>
</div>
<div >
<strong> www.baidu.com</strong>
</div>
</body>

$(function(){

$('div').attr('title','aaa')  //设置div的title属性为aaa
 /*$('div').attr({      //这里可以设置多个属性如下；
      "title":"jquery基础DOM和CSS操作",
     "class":"red",
      "mvp":"a~mao"    
  });*/
  $('div').attr('title',function(){  //用function最简单的操作，直接返回属性值
    &
4000
#160; return 'jquery基础DOM和CSS操作';
  }) 
//index是索引值，操作的哪个‘DIV’就改变哪个属性值，看如下操作 注意这里的index索引是从0开始的
     $('div').attr('title',function(index){
        return '第'+(index+1) +'DIV的jquery基础DOM和CSS操作' ;
    });
// function还可以加两个参数:  第二个参数表示属性原本的值；
 $('div').attr('title',function(index,second){
        return second +'第'+(index+1)+'DIV的jquery基础DOM和CSS操作' ;
    });
//观察发现second是未定义，这是因为我们index.html上面没有title属性值，加一个属性值在来观察
});

index.html

<div title = 'aaa'>
<strong> www.csdn.com</strong>
</div>
<div title = 'bbb'>
<strong> www.baidu.com</strong>
</div>

在来试上面操作

$(function(){

$('div').attr('title',function(index,second){    //注意，这里的第二个参数名可以随便写
return "旧的title:"+second +',新的title'+(index+1)+'jquery基础DOM和CSS操作' ;
});
 //有了第二个参数，在来试一下
    $('div').html(function(index,oldValue){
        return oldValue + 'www.baidu.com';
    });
 });

发现，上面操作也是可以的；在试一下text()

$('div').text(function(index,oldValue){
return oldValue	+"  新的值班员"
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航