JQuery DOM 有关代码练习
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery DOM 有关代码练习相关的知识，希望对你有一定的参考价值。
//累加你选择的个数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery.js"></script>
<script>
$(function () {
var xg = "<li title=‘西瓜‘>西瓜</li>";
var xj = "<li title=‘香蕉‘>香蕉</li>";
var ll = "<li title=‘榴莲‘>榴莲</li>";
//添加
$(xg).appendTo("ul");
$(xj).prependTo("ul");
//在橘子后面添加榴莲
$(ll).insertAfter("[title = 橘子]");
//遍历ul的子元素li 为没个li都添加点击事件
$("ul").children().click(function () {
//获取点击的 title 属性值
var ti = $(this).attr("title");
//如果ol li里面的内容不包括此内容 代表ol 里面没有此标签
if ($("ol li:contains(" + ti + ")").length == 0) {
//添加此标签到ol中
$(this).clone().appendTo("ol");
//为此标签的后面添加一个span标签 用来计数
$("ol li:contains(" + ti + ")").append("<span>1</span>");
}
else {
//先得到span里面的数字
var num = $("ol li:contains(" + ti + ") span").text();
//进行累加
$("ol li:contains(" + ti + ") span").text(parseInt(num) + 1);
}
});
});
</script>
</head>
<body>
<ul>
<li title=‘苹果‘>苹果</li>
<li title=‘橘子‘>橘子</li>
<li title=‘菠萝‘>菠萝</li>
</ul>
<ol></ol>
</body>
</html>
让提示条跟这鼠标走
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#d1{
background-color:#888;
color:#444;
border:solid 1px #444;
position:absolute; /*可以手动定位此标签*/
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
//鼠标进入A标签事件
$("a").mouseover(function () {
//取到A标签的title属性的值
var str = $(this).attr("title");
//生成div字符串
var tip = ‘<div id="d1">‘ + str + ‘</div>‘;
//往body中添加一个div
$(tip).appendTo("body");
}).mouseout(function () { //鼠标划出事件
//删除div
$("#d1").remove();
}).mousemove(function (e) { //鼠标移动事件 e可以用来定位鼠标位子
//因为在CSS样式中绝对定位了，可以设置left 和top属性 left:距离页面左边距离 top:距离页面上面距离
$("#d1").css({ "left": "" + (e.pageX + 15) + "px", "top": "" + (e.pageY + 15) + "px" });
});
});
</script>
</head>
<body>
<a href="#" title="这是默认的提示">这是默认的提示</a>
</body>
</html>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> #d1{ background-color:#888; color:#444; border:solid 1px #444; position:absolute; /*可以手动定位此标签*/ } </style> <script src="jquery.js"></script> <script> $(function () { //鼠标进入A标签事件 $("a").mouseover(function () { //取到A标签的title属性的值 var str = $(this).attr("title"); //生成div字符串 var tip = ‘<div id="d1">‘ + str + ‘</div>‘; //往body中添加一个div $(tip).appendTo("body"); }).mouseout(function () { //鼠标划出事件 //删除div $("#d1").remove(); }).mousemove(function (e) { //鼠标移动事件 e可以用来定位鼠标位子 //因为在CSS样式中绝对定位了，可以设置left 和top属性 left:距离页面左边距离 top:距离页面上面距离 $("#d1").css({ "left": "" + (e.pageX + 15) + "px", "top": "" + (e.pageY + 15) + "px" }); }); }); </script>
</head><body> <a href="#" title="这是默认的提示">这是默认的提示</a> </body></html>
以上是关于JQuery DOM 有关代码练习的主要内容，如果未能解决你的问题，请参考以下文章