index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基础 DOM 和 CSS 操作</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> <div title="demo" id="box"> <strong>http://onestopweb.cn/</strong> </div> <div id="box"> <strong>http://onestopweb.cn/</strong> </div> <!-- <input type="text" value="一站式共享网络" /> <input type="radio" value="男" />男 <input type="radio" value="女" />女 <input type="checkbox" value="编程" />编程 --> </body> </html>
dome.js
$(function(){ //alert($('#box').html()); //alert($('#box').text());//text 获取的是文本,有 html 会自动被清理 //$('#box').html('<em>www.onestopweb.cn</em>');//替换HTML内容,有 HTML 会自动解析 //$('#box').text('<em>www.onestopweb.cn</em>');//替换文本内容,有 HTML 会自动转义 //alert($('input').val()); //$('input').val('一站式建网站'); //alert($('input').val()); //$('input').val('女'); //alert($('input').val()); //$('input').val(['男','女','编程']); //alert($('#box').attr('id')); //$('div').attr('title','我是域名'); /* $('div').attr({ 'title':'我是域名', 'class':'red',//class 不建用 attr 来设置,后面有功能更强大和更丰富的方法代替 'data':'123' }); */ /* $('div').attr('title',function(){ return '我是域名'; }); */ /* $('div').attr('title',function(index,value){ return '我是'+(index+1)+'号域名'; }); */ /* $('div').attr('title',function(index,value){ return '原来的ttile是:'+value+',现在的title是'+(index+1)+'号域名'; }); */ //$('div').html($('div').html()+'<em>www.onestopweb.cn</em>'); 追加 /* $('div').html(function(index,value){ return value+'<em>onestopweb.cn</em>'; }); */ //$('div').removeAttr('title'); /* $('div').removeAttr(function(){//错误的,不可以传递function return 'title'; }); */ });