的用法实例分享,data属性简介以及低版本浏览器
分类:美高梅游戏官网网站

阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

jquery操作HTML5 的data-*的用法实例分享,jqueryhtml5

阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。

jquery 里已经内置这个方法. 通过 $(‘#content‘).data(‘list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML5 的data-*的用法</title>
</head>
<script src=";
<script>
$(function(){
    //读取data-*的值
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
    
    //设置data-*的值
    $("li").eq(0).data('name','bryant');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
    
    //删除data-*的值   这里使用的是removeAttr,测试官方的removeData是不起作用的
    $("li").eq(0).removeAttr('data-name');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
})
</script>
<body>
<ul>
    <li data-name="kobe">科比</li>
    <li data-name="gasol">加索尔</li>
    <li data-name="nash">纳什</li>
    <li data-name="fisher">费舍尔</li>
</ul>
</body>
</html>

实例

使用 data-* 属性来嵌入自定义数据:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

 

第三章 jQuery中的DOM操作,jquerydom

  DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树。

  jQuery继承了JavaScript对DOM对象操作的特性,使开发人员能方便地操作DOM对象。

  1.查找节点

美高梅网址 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { var $para = $("p"); // 获取<p>节点 var p_txt = $para.attr("title"); // 获取<p>元素节点属性title alert(p_txt); var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点 var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title var li_txt = $li.text(); // 获取第二个<li>元素节点的text alert(ul_txt); alert(li_txt); }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  2.创建节点

美高梅网址 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-2-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素 var $parent = $("ul"); // 获取<ul>节点,<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2); }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-2-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素,包括元素节点和文本节点 //“香蕉”就是创建的文本节点。 var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素,包括元素节点和文本节点 //“雪梨”就是创建的文本节点。 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $("ul").append($li_1); // 添加到<ul>节点中,使之能在网页中显示 $("ul").append($li_2); // 添加到<ul>节点中,使之能在网页中显示 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-2-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素 //包括元素节点,文本节点和属性节点 //其中title='香蕉' 就是创建的属性节点 var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素 //包括元素节点,文本节点和属性节点 //其中title='雪梨' 就是创建的属性节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示 $parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2); }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  3.插入节点

美高梅网址 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-3-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素 var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素 var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素 var $parent = $("ul"); // 获取<ul>节点,即<li>的父节点 var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 $parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面 $parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面 $li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-3-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点 $two_li.insertBefore($one_li); //移动节点 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  4.删除节点

美高梅网址 7<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。 $li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里 //所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 9<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 10<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-4</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后,清空此元素里的内容 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  5.复制节点

美高梅网址 11<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-5-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("ul li").click(function(){ $(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素 }) }); </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 12<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-5-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("ul li").click(function(){ $(this).clone(true).appendTo("ul"); // 注意参数true //可以复制自己,并且他的副本也有同样功能。 }) }); </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  6.替换节点

美高梅网址 13<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-6</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); // 同样的实现: $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  7.包裹节点

美高梅网址 14<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来 }); //]]> </script> </head> <body> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 15<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrap("<b></b>"); }); //]]> </script> </head> <body> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 16<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapAll("<b></b>"); }); //]]> </script> </head> <body> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 17<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-4</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapInner("<b></b>"); }); //]]> </script> </head> <body> <strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  8.属性操作

美高梅网址 18<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-8</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置<p>元素的属性'title' $("input:eq(0)").click(function(){ $("p").attr("title","选择你最喜欢的水果."); }); //获取<p>元素的属性'title' $("input:eq(1)").click(function(){ alert( $("p").attr("title") ); }); //删除<p>元素的属性'title' $("input:eq(2)").click(function(){ $("p").removeAttr("title"); }); }); //]]> </script> </head> <body> <input type="button" value="设置<p>元素的属性'title'"/> <input type="button" value="获取<p>元素的属性'title'"/> <input type="button" value="删除<p>元素的属性'title'"/> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  9.样式操作

美高梅网址 19<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-9-1</title> <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置红色*/ } .another{ font-style:italic; color:blue; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { //获取样式 $("input:eq(0)").click(function () { alert($("p").attr("class")); }); //设置样式 $("input:eq(1)").click(function () { $("p").attr("class", "high"); }); //追加样式 $("input:eq(2)").click(function () { $("p").addClass("another"); }); //删除全部样式 $("input:eq(3)").click(function () { $("p").removeClass(); }); //删除指定样式 $("input:eq(4)").click(function () { $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function () { $("p").toggleClass("another"); }); //判断元素是否含有某样式 $("input:eq(6)").click(function () { alert($("p").hasClass("another")); alert($("p").is(".another")); //同上 }); }); //]]> </script> </head> <body> <input type="button" value="输出class类"/> <input type="button" value="设置class类"/> <input type="button" value="追加class类"/> <input type="button" value="删除全部class类"/> <input type="button" value="删除指定class类"/> <input type="button" value="重复切换class类"/> <input type="button" value="判断元素是否含有某个class类"/> <p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  10.设置获取HTML,文本和值

美高梅网址 20<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-1</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的HTML代码 $("input:eq(0)").click(function(){ alert( $("p").html() ); }); //获取<p>元素的文本 $("input:eq(1)").click(function(){ alert( $("p").text() ); }); //设置<p>元素的HTML代码 $("input:eq(2)").click(function(){ $("p").html("<strong>你最喜欢的电影是?</strong>"); }); //设置<p>元素的文本 $("input:eq(3)").click(function(){ $("p").text("你最喜欢的球星是?"); }); //设置<p>元素的文本 $("input:eq(4)").click(function(){ $("p").text("<strong>你最喜欢的游戏是?</strong>"); }); //获取按钮的value值 $("input:eq(5)").click(function(){ alert( $(this).val() ); }); //设置按钮的value值 $("input:eq(6)").click(function(){ $(this).val("我被点击了!"); }); }); //]]> </script> </head> <body> <input type="button" value="获取<p>元素的HTML代码"/> <input type="button" value="获取<p>元素的文本"/> <input type="button" value="设置<p>元素的HTML代码"/> <input type="button" value="设置<p>元素的文本"/> <input type="button" value="设置<p>元素的文本(带HTML)"/> <input type="button" value="获取按钮的value值"/> <input type="button" value="设置按钮的value值"/> <p title="选择你最喜欢的水果." ><strong>你最喜欢的水果是?</strong></p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 21<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-2-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value=="请输入邮箱地址"){ $(this).val(""); // 如果符合条件,则清空文本框内容 } }); $("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val("请输入邮箱地址");// 如果符合条件,则设置内容 } }) $("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value=="请输入邮箱密码"){ $(this).val(""); } }); $("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val("请输入邮箱密码"); } }) }); //]]> </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登陆"/> </body> </html> View Code 美高梅网址 22<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-2-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { $("#address").focus(function () { // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if (txt_value == this.defaultValue) { $(this).val(""); // 如果符合条件,则清空文本框内容 } }); $("#address").blur(function () { // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if (txt_value == "") { $(this).val(this.defaultValue); // 如果符合条件,则设置内容 } }) $("#password").focus(function () { var txt_value = $(this).val(); if (txt_value == this.defaultValue) { $(this).val(""); } }); $("#password").blur(function () { var txt_value = $(this).val(); if (txt_value == "") { $(this).val(this.defaultValue); } }) }); //]]> </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登陆"/> </body> </html> View Code 美高梅网址 23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-3</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置单选下拉框选中 $("input:eq(0)").click(function(){ $("#single").val("选择2号"); }); //设置多选下拉框选中 $("input:eq(1)").click(function(){ $("#multiple").val(["选择2号", "选择3号"]); }); //设置单选框和多选框选中 $("input:eq(2)").click(function(){ $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); }); }); //]]> </script> </head> <body> <input type="button" value="设置单选下拉框选中"/> <input type="button" value="设置多选下拉框选中"/> <input type="button" value="设置单选框和多选框选中"/> <br/><br/> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <br/><br/> <input type="checkbox" value="check1"/> 多选1 <input type="checkbox" value="check2"/> 多选2 <input type="checkbox" value="check3"/> 多选3 <input type="checkbox" value="check4"/> 多选4 <br/> <input type="radio" value="radio1"/> 单选1 <input type="radio" value="radio2"/> 单选2 <input type="radio" value="radio3"/> 单选3 </body> </html> View Code 美高梅网址 24<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-4</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置单选下拉框选中 $("input:eq(0)").click(function(){ $("#single option").removeAttr("selected"); //移除属性selected $("#single option:eq(1)").attr("selected",true); //设置属性selected }); //设置多选下拉框选中 $("input:eq(1)").click(function(){ $("#multiple option").removeAttr("selected"); //移除属性selected $("#multiple option:eq(2)").attr("selected",true);//设置属性selected $("#multiple option:eq(3)").attr("selected",true);//设置属性selected }); //设置单选框和多选框选中 $("input:eq(2)").click(function(){ $(":checkbox").removeAttr("checked"); //移除属性checked $(":radio").removeAttr("checked"); //移除属性checked $("[value=check2]:checkbox").attr("checked",true);//设置属性checked $("[value=check3]:checkbox").attr("checked",true);//设置属性checked $("[value=radio2]:radio").attr("checked",true);//设置属性checked }); }); //]]> </script> </head> <body> <input type="button" value="设置单选下拉框选中"/> <input type="button" value="设置多选下拉框选中"/> <input type="button" value="设置单选框和多选框选中"/> <br/><br/> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <br/><br/> <input type="checkbox" value="check1"/> 多选1 <input type="checkbox" value="check2"/> 多选2 <input type="checkbox" value="check3"/> 多选3 <input type="checkbox" value="check4"/> 多选4 <br/> <input type="radio" value="radio1" name="a"/> 单选1 <input type="radio" value="radio2" name="a"/> 单选2 <input type="radio" value="radio3" name="a"/> 单选3 </body> </html> View Code

  11.遍历节点

美高梅网址 25<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-11-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $body = $("body").children(); var $p = $("p").children(); var $ul = $("ul").children(); alert( $body.length ); // <body>元素下有2个子元素 alert( $p.length ); // <p>元素下有0个子元素 alert( $ul.length ); // <p>元素下有3个子元素 for(var i=0;i< $ul.length;i++){ alert( $ul[i].innerHTML ); } }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 26<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-11-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $p1 = $("p").next(); alert( $p1.html() ); // 紧邻<p>元素后的同辈元素 var $ul = $("ul").prev(); alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素 var $p2 = $("p").siblings(); alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素 }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code 美高梅网址 27<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-11-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { $(document).bind("click", function (e) { $(e.target).closest("li").css("color", "red"); }) }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

  12.CSS-DOM操作

美高梅网址 28<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-12-1</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的color $("input:eq(0)").click(function(){ alert( $("p").css("color") ); }); //设置<p>元素的color $("input:eq(1)").click(function(){ $("p").css("color","red") }); //设置<p>元素的fontSize和backgroundColor $("input:eq(2)").click(function(){ $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) }); //获取<p>元素的高度 $("input:eq(3)").click(function(){ alert( $("p").height() ); }); //获取<p>元素的宽度 $("input:eq(4)").click(function(){ alert( $("p").width() ); }); //获取<p>元素的高度 $("input:eq(5)").click(function(){ $("p").height("100px"); }); //获取<p>元素的宽度 $("input:eq(6)").click(function(){ $("p").width("400px"); }); //获取<p>元素的的左边距和上边距 $("input:eq(7)").click(function(){ var offset = $("p").offset(); var left = offset.left; var top = offset.top; alert("left:"+left+";top:"+top); }); }); //]]> </script> </head> <body> <input type="button" value="获取<p>元素的color"/> <input type="button" value="设置<p>元素的color"/> <input type="button" value="设置<p>元素的fontSize和backgroundColor"/> <input type="button" value="获取<p>元素的高度"/> <input type="button" value="获取<p>元素的宽度"/> <input type="button" value="设置<p>元素的高度"/> <input type="button" value="设置<p>元素的宽度"/> <input type="button" value="获取<p>元素的的左边距和上边距"/> <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html> View Code

 PS:参考文献《锋利的jQuery》

jquery 里已经内置这个方法. 通过 $(‘#content‘).data(‘list'); 就能获取数据. 这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性.

怎使jquery动态改变页面之后,原html页面中的代码也改变并保存了下来

这是不行的!因为 js 不能保存文件!!!
有一个方法,就是利用 cookies !,但是 cookies 很小,最大只有 4K 。

有两种别的方案。
1、html5提供离线保存数据。但是有个问题是,ie6,ie7,ie8都不支持HTML5 !
2、用 ajajx 方式直接提交数据到数据库!这个适合任何浏览器!

浏览器支持

IE Firefox Chrome Safari Opera
     支持      支持      支持      支持      支持

所有主流浏览器都支持 data-* 属性。

对于jquery一些问题

哇哦,我帮你写代码:
<script type="text/javascript">
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});

});

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jquery操作HTML5 的data-*的用法</title>
</head>
<script src=">
<script>
$(function(){
    //读取data-*的值
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
    
    //设置data-*的值
    $("li").eq(0).data('name','bryant');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
    
    //删除data-*的值   这里使用的是removeAttr,测试官方的removeData是不起作用的
    $("li").eq(0).removeAttr('data-name');
    $("li").each(function(v) {
        console.log($(this).data('name'));
    });
})
</script>
<body>
<ul>
    <li data-name="kobe">科比</li>
    <li data-name="gasol">加索尔</li>
    <li data-name="nash">纳什</li>
    <li data-name="fisher">费舍尔</li>
</ul>
</body>
</html>

只有这两种方案!

有问题追问哦,^_*  

定义和用法

data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

  • 美高梅网址,属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串

注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。

 

</script>

看出来去别的吗?一定要加在:
$(function(){ })
的函数内。

你之所以没效果,是因为你绑定事件的时候 ,dom 节点根本不存在。
而 $(function(){ }) 这个函数的意思是,当 所有 html

您可能感兴趣的文章:

  • html5的自定义data-*属性和jquery的data()方法的使用示例
  • jQuery中使用data()方法读取HTML5自定义属性data-*实例
  • js 获取html5的data属性实现方法

jquery 怎实现html5 range 滑动取值的代码

可以直接使用jquery ui中的slider。  

的data-*的用法实例分享,jqueryhtml5 阅读HTML5的详细规范后你会发现,这个自定义data属性的用法非常的简单,就是你可以往HTM...

语法

<element data-*="somevalue">

文本加载渲染完毕的时候,才开始执行。

^_* ,这样可以设为最佳了吧?谢谢哦  

属性值

描述
somevalue 规定属性的值(以字符串)。

 

HTML adta-*属性

==============【以上来自W3School】===================

【外加信息】

HTML标签可以添加自定义属性来存储和操作数据。但这样做会导致html语法上不符合Html规范。HTML5规范里增加了一个自定义data属性,自定义data属性的用法非常的简单,就可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。 

下面的一个代码片段是一个有效的HTML5标记: 

 

[html] view plain copy

 

  1. <div id="item" data-id='123'>11111</div>  

 

可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。

 举个例子,你可以用下面的写法读取 data-id属性值--123: 

[javascript] view plain copy

 

  1. var myid= jQuery("#item").data('id');  

 

你还可以在"data-*" 属性里使用json语法,

[html] view plain copy

 

  1. <div id="item" data-id='{"game":"on"}'></div>  

你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value: 

[javascript] view plain copy

 

  1. var gameStatus= jQuery("#item").data('id').game;  

你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。

================

==============【data属性低版本兼容】==================

【DEMO】

【效果】

美高梅网址 29

 

[html] view plain copy

 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>dataset</title>  
  6.     <style>  
  7.         li{cursor: default;line-height: 1.8;}  
  8.         table{border-collapse: collapse;}  
  9.         th, td, caption{padding: 10px;border: 1px solid #ddd;font-size: 14px;}  
  10.         th{color: #999;}  
  11.         caption{font-size: 20px;font-weight: bold;border-bottom: none;}  
  12.         #card{position: absolute;top: 10px;left: 150px;}  
  13.     </style>  
  14. </head>  
  15. <body>  
  16.     <ul>  
  17.         <li data-id="123456" data-account-name="张威"  
  18.             data-name="张威" data-email="17777777777@163.com"   
  19.             data-mobile="17777777777">张威</li>  
  20.         <li data-id="123457" data-account-name="JokerWill"  
  21.             data-name="JokerWill" data-email="13333333333@163.com"   
  22.             data-mobile="13333333333">JokerWill</li>  
  23.     </ul>  
  24.     <div id="card" style="display:none">  
  25.         <table>  
  26.             <caption id="accountName"></caption>  
  27.             <tr><th>姓名:</th><td id="name"></td></tr>  
  28.             <tr><th>邮箱:</th><td id="email"></td></tr>  
  29.             <tr><th>手机:</th><td id="mobile"></td></tr>  
  30.         </table>  
  31.   
  32.     </div>  
  33.     <script>  
  34.         function $(id){  
  35.             return document.getElementById(id);  
  36.         }  
  37.         var lis = document.getElementsByTagName('li');  
  38.         for(var i = 0, li;li = lis[i]; i++){  
  39.             li.onmouseenter = function(event){  
  40.                 event = event || window.event;  
  41.                 var user = event.target|| event.srcElement;  
  42.                 //var data = user.dataset;  
  43.                 var data=get_dataset(user);  
  44.                 $('accountName').innerText = data.accountName;  
  45.                 $('name').innerText = data.name;  
  46.                 $('email').innerText = data.email;  
  47.                 $('mobile').innerText = data.mobile;  
  48.   
  49.                 $('card').style.display = 'block';  
  50.             };  
  51.   
  52.             li.onmouseleave = function(event){  
  53.                 $('card').style.display = 'none';  
  54.             };  
  55.   
  56.         }  
  57.           
  58.         //带兼容的函数  
  59.         function get_dataset(ele){  
  60.             if(ele.dataset)  
  61.                 return ele.dataset;  
  62.             else{  
  63.             //一下是兼容代码  
  64.                 var dataset = {};  
  65.                 var ele_split = ele.outerHTML.split(" ");  
  66.                 for(var i = 0,element; i < ele_split.length; i++)      
  67.                 {  
  68.                     element = ele_split[i];  
  69.                     if (element.substring(0,4) == "data") {   
  70.                         if (element.indexOf(">") !=  -1) {   
  71.                             element = element.split(">")[0];  
  72.                         };  
  73.                         ele_key=element.split("=")[0].slice(5);  
  74.                         ele_value=element.split("=")[1].slice(1,-1);  
  75.                         if(ele_key.indexOf("-") ==  -1){  
  76.                             dataset[ele_key] = ele_value;  
  77.                         }else{  
  78.                             ele_keys=ele_key.split("-");  
  79.                             ele_key=ele_keys[0];  
  80.                             for(i=1;i<ele_keys.length;i++){  
  81.                                 ele_key+=replaceReg(ele_keys[i]);  
  82.                             }                 
  83.                         }  
  84.                     };  
  85.                 }  
  86.                 return dataset;  
  87.             }  
  88.   
  89.         }  
  90.         //正则表达式变换首字母大写  
  91.          function replaceReg(str){   
  92.                var reg = /b(w)|s(w)/g;   
  93.                str = str.toLowerCase();   
  94.                return str.replace(reg,function(m){return m.toUpperCase()})   
  95.          }  
  96.     </script>  
  97. </body>  
  98. </html>  

【关键代码】

 

 

[html] view plain copy

 

  1. //带兼容的函数  
  2. function get_dataset(ele){  
  3.     if(ele.dataset)  
  4.         return ele.dataset;  
  5.     else{  
  6.     //一下是兼容代码  
  7.         var dataset = {};  
  8.         var ele_split = ele.outerHTML.split(" ");  
  9.         for(var i = 0,element; i < ele_split.length; i++)      
  10.         {  
  11.             element = ele_split[i];  
  12.             if (element.substring(0,4) == "data") {   
  13.                 if (element.indexOf(">") !=  -1) {   
  14.                     element = element.split(">")[0];  
  15.                 };  
  16.                 ele_key=element.split("=")[0].slice(5);  
  17.                 ele_value=element.split("=")[1].slice(1,-1);  
  18.                 if(ele_key.indexOf("-") ==  -1){  
  19.                     dataset[ele_key] = ele_value;  
  20.                 }else{  
  21.                     ele_keys=ele_key.split("-");  
  22.                     ele_key=ele_keys[0];  
  23.                     for(i=1;i<ele_keys.length;i++){  
  24.                         ele_key+=replaceReg(ele_keys[i]);  
  25.                     }                 
  26.                 }  
  27.             };  
  28.         }  
  29.         return dataset;  
  30.     }  
  31.   
  32. }  

jQuery:这里是怎实现?原代码没看懂

你这段代码中jquery只是处理了,<span>的click事件。
当click发生时,只显示大标题,并且点击了哪个大标题,就会显示其下相应的小标题。

至于为什么一进入页面就显示大标题,可能跟你的css有关系吧。  

jQuery中的DOM操作,jquerydom DOM(Document Object Model)文档对象模型,每张网页都能用DOM表示出来,每一份DOM都能看成一颗DOM树。 jQuery继承...

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:的用法实例分享,data属性简介以及低版本浏览器

上一篇:JS后端框架推荐,开发框架 下一篇:没有了
猜你喜欢
热门排行
精彩图文