HTML 学习笔记 JQuery（锋利的JQuery 代码）
一 制作简单的导航栏
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> <style type="text/css">
#menu {width: 300px;}
/*cursor 规定光标的显示类型*/
.has_children{background: #555555; color: #ffffff;cursor: pointer;}
.highlight{color: #ffffff; background: green;}
div {
/*内间距*/
padding: 1px;
clear: left;
}
div a {
background: #888888;
/*标签a先不显示*/
display: none;
float: left;
margin: 2px;
widows: 300px;
}
</style> <script>
$(function() {
//为class = "has_children"的div添加点击事件
$(".has_children").click(function() {
$(this).addClass("highlight")
//将子节点的元素显示出来 并重新定位到上次操作的元素
$(this).children("a").show().end()
//将点击div临近的兄弟元素 移除点击类
$(this).siblings().removeClass("highlight").children("a").hide() })
})
</script>
</head>
<body>
<div id="menu">
<div class="has_children">
<span>第一章－认识JQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>
<div class="has_children">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>
<div class="has_children">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>
</div>
</body>
</html>
二 选中提示
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script> </head>
<body>
<input type="checkbox" id="cr" />
<label for="cr">我已经阅读了上面的制度</label> <!--<div id="div100">哈哈哈哈</div>-->
</body>
<script>
//JavaScript 操作
// var dom = document.getElementById("cr")
// dom.addEventListener("click",function() {
// if (dom.checked) {
// alert("感谢您的支持，请继续操作")
// }
// })
//JQuery操作
$(function() {
$("#cr").click(function() {
if ($(this).is(":checked")) {
alert("感谢您的支持，请继续操作")
}
})
})
</script>
</html>
三 基本选择器
JS文件
$(document).ready(function(){
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});
$("input[type=button]").click(function(){
if($("#isreset").is(":checked")){
$("#reset").click();
}
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
})
css文件
div,span,p {
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini {
width:55px;
height:55px;
background-color: #aaa;
font-size:12px;
}
div.hide {
display:none;
}
HTML文件
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/Selecter.css"/>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3> <!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/> <br /><br /> <!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
<script>
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfa");
});
//选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$('.mini').css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css("background","#bfa");
});
//选择 所有的元素
$('#btn4').click(function(){
$('*').css("background","#bfa");
});
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css("background","#bfa");
}); });
</script>
</html>
四 层次选择器
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/Selecter.css" />
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3> <!-- 控制按钮 -->
<input type="button" value="选择 body中所有的div元素." id="btn1"/>
<input type="button" value="选择 body中子元素是div的." id="btn2"/>
<input type="button" value="选择 class为one的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面所有的div兄弟元素." id="btn4"/> <br /><br /> <!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
<script>
$(function() {
$("#btn1").click(function() {
//选择body中所有的div元素
$("body div").css("background","#00FFFF")
})
$("#btn2").click(function() {
//选择body中的所有子元素div
$("body > div").css("background","#00FFFF")
})
$("#btn3").click(function() {
//选择class为one的下一个div元素
$(".one + div").css("background","#00FFFF")
})
$("#btn4").click(function() {
//选择ID为two的元素后面所有的div兄弟元素
$("#two ~ div").css("background","#00FFFF")
})
})
</script>
</html>
五 基本过滤选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/Selecter.css" />
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/> <br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span> </body>
<script>
$(function() {
//选择第一个div元素
$("#btn1").click(function() {
$("div:first").css("background","#00FFFF")
})
//选择最后一个div元素
$("#btn2").click(function() {
$("div:last").css("background","#00FFFF")
})
//选择class不为one的所有div元素
$("#btn3").click(function() {
$("div:not(.one)").css("background","#00FFFF")
})
//选择索引值为偶数的div元素
$("#btn4").click(function() {
$("div:even").css("background","#00FFFF")
})
//选择索引值为奇数的div元素
$("#btn5").click(function() {
$("div:odd").css("background","#00FFFF")
})
//选择索引值等于3的元素
$("#btn6").click(function() {
$("div:eq(3)").css("background","#00FFFF")
})
//选择索引值大于3的元素
$("#btn7").click(function() {
$("div:gt(3)").css("background","#00FFFF")
})
//选择索引值小于3的元素
$("#btn8").click(function() {
$("div:lt(3)").css("background","#00FFFF")
})
//选择所有的标题元素
$("#btn9").click(function() {
$(":header").css("background","#00FFFF")
})
//选择 当前正在执行动画的元素
$("#btn10").click(function() {
$(":animated").css("background","#00FFFF")
}) })
</script>
</html>
六 内容过滤选择器
<html>
<head>
<meta charset="UTF-8">
<title>内容过滤选择器</title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/Selecter.css" />
</head>
<body>
<h3>内容过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/> <!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span> </body>
<script>
$(document).ready(function() {
//选取含有文本"di"的div元素
$("#btn1").click(function() {
$("div:contains(di)").css("background","#00FFFF")
})
//选取不包含子元素(或者文本元素)的div
$("#btn2").click(function() {
$("div:empty").css("background","#00FFFF")
})
//选取含有class为mini的div元素
$("#btn3").click(function() {
$("div:has(.mini)").css("background","#00FFFF")
})
//选取含有子元素(或者文本元素)的div元素
$("#btn4").click(function() {
$("div:parent").css("background","#00FFFF")
})
})
</script>
</html>
七 可见性过滤选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/assist.js"></script>
<link type="text/css" rel="stylesheet" href="../css/Selecter.css" />
</head>
<body>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button><br/><br/>
<input type="button" value="选取所有可见的div元素." id="btn_visible"/>
<br/>
<input type="button" value="选取所有不可见的元素.包括<
input type='hidden'/>和<
div style='display:none;'>." id="btn_hidden"/>
<br /><br />
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
<script>
$(function() {
//选取所有不可见的元素
$("#btn_hidden").click(function() {
alert( "不可见的元素有："+$('body :hidden').length +"个!\n"+
"其中不可见的div元素有:"+$('div:hidden').length+"个!\n"+
"其中文本隐藏域有:"+$('input:hidden').length+"个!");
$("div:hidden").show(3000).css("background","#00FFFF")
})
//选取所有可见的元素
$("#btn_visible").click(function() {
$("div:visible").css("background","#00FFFF")
})
})
</script>
</html>
八 子元素过滤选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/assist.js"></script>
<link rel="stylesheet" href="../css/demo.css" />
</head>
<body>
<button id="reset">手动设置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" />
<label for="isreset">点击下列按钮先自动重置页面</label>
<h3>子元素过滤选择器</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素" id="btn1" />
<input type="button" value="选取每个class为one的div父元素下的第一个子元素" id="btn2" />
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="btn4" /> <div class="one" id="one">
id为one class为one的div
<div class="mini">
class为mini的div
</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">
class为mini,title为other
</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
<script type="text/javascript">
$(function() {
//选取每个父元素下的第二个子元素
$("#btn1").click(function() {
$("div:nth-child(2)").css("background","#008000")
})
//选取父元素下的第一个子元素
$("#btn2").click(function() {
$("div:first-child").css("background","#008000")
})
//选取父元素下的最后一个子元素
$("#btn3").click(function() {
$("div:last-child").css("background","#008000")
})
//如果父元素仅仅只有一个子元素，那么选中这个子元素
$("#btn4").click(function() {
$("div:only-child").css("background","#008000")
})
})
</script>
</html>
九 表单对象属性过滤选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<form id="form1" action="#">
<button type="reset">重置所有的表单元素</button>
<br /><br />
<button id="btn1">对表单内 可用input赋值操作</button>
<button id="btn2">对表单内不可用input操作</button>
可用元素<input name="add" value="可用文本框" /> <br />
不可用元素<input name="email" disabled="disabled" value="不可用文本框" /><br />
可用元素<input name="che" value="可用文本框" /> <br />
不可用元素<input name="name" disabled="disabled" value="不可用文本框" /><br />
<br />
多选框:<br />
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br />
下拉列表1:<br />
<!--mulitiple 是控制是否展开-->
<select name="test" multiple="multiple" style="height: 100px;">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br />
下拉列表:<br />
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<div></div>
</form>
</body>
<script type="text/javascript">
$(function() {
//重置表单元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//对表单内 可用的input进行赋值操作
$("#btn1").click(function() {
$("#form1 input:enabled").val("这里变化了")
return false
})
//对表单内不可用的input进行赋值操作
$("#btn2").click(function() {
$("#form1 input:disabled").val("我是不可用哦")
})
//使用:checkbox选取所有的复选框
$(":checkbox").click(countChecked)
function countChecked() {
var n = $("input:checked").length
$("div").eq(0).html("<strong>有 "+ n +" 个被选中！</strong>")
}
//进入页面就调用
countChecked(); //使用:selected选择器，来操作下拉列表.
$("#form1 select").change(function () {
var str = ""
$("#form1 select :selected").each(function() {
str += $(this).text() + ",";
})
$("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
}).trigger("change")
// trigger('change') 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.
})
</script>
</html>
十 表单对象选择器
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" action="#">
<input type="button" value="Button" /><br />
<input type="checkbox" name="c" />1
<input type="checkbox" name="c" />2
<input type="checkbox" name="c" />3
<br />
<input type="file" /><br />
<input type="hidden" />
<div style="display: none;">test</div>
<br />
<input type="image" /><br />
<input type="password" /><br />
<input type="radio" name="a" />1
<input type="radio" name="a" />2
<input type="radio" name="a" />3 <br />
<input type="reset" /><br />
<input type="submit" value="提交"/><br />
<input type="text" /><br />
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br />
<button>Button</button><br />
</form>
<div></div>
</body>
<script>
$(function() {
//选取所有的单行文本框
var $allText = $("#form1 :text")
//选取所有的密码框
var $allPassword = $("#form1 :password")
//选取所有的单选框
var $allRadio = $("#form1 :radio")
//选取所有的多选框
var $allCheckbox = $("#form1 :checkbox")
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea"); var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input"); $("div").append("有" + $allText.length + "个(:text 元素) <br />")
.append(" 有" + $allPassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allRadio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allCheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
})
</script>
</html>
十二 插入节点
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body
<h3>街头访问</h3>
<p title="你最喜欢的水果是">你最喜欢的水果是</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul> <p id="pone">我想说</p> <p id="ptwo">在我之前插入</p> </body>
<script>
$(function () {
//创建元素节点
var $li_1 = $("<li title='香蕉'>香蕉</li>")
$("ul").append($li_1)
//或者这样
$("<li title='雪梨'>雪梨</li>").appendTo($("ul"))
//弹出雪梨 代表
alert($("ul li[title = 雪梨]").attr("title"))
//插入节点
//向每个匹配的元素内部前置内容
$("p:eq(0)").prepend($("<b>请问</b>"))
//或者这样 <p><b>嘿嘿</b>你最喜欢的水果是</p> 以上都是元素内部插入
$("<b>嘿嘿</b>").prependTo($("p:first")) //元素外部插入 在元素前或者元素后
$("#pone").after($("<span>你是不是傻</span>"))
//或者这样
$("<span>你是不是傻</span>").insertAfter($("#pone"))
//上面的两句代码都是在元素后插入一个元素 //在元素前插入一个元素
$("#ptwo").before($("<p>哈哈哈哈</p>"))
//或者这样
$("<p>heiheihei</p>").insertBefore($("#ptwo"))
})
</script> </html>
十三 移动节点 删除节点
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
<li title="雪梨">雪梨</li>
</ul>
</body>
<script>
$(function() {
//把苹果移动到菠萝的后面 橘子没动 菠萝也灭懂
$("ul li:eq(0)").insertAfter($("ul li:eq(2)"))
//删除节点
$("ul li:eq(0)").remove() //remove()方法也可以这样用
$("ul li").remove("li[title = 菠萝]") //empty()方法 只是清空元素中的内容 并没有清空元素
$("ul li:eq(0)").empty()
})
</script>
</html>
十四 复制节点 移除节点
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<h3>街头访问</h3>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<script>
$(function() {
//复制节点 //如果你想复制的节点也有绑定的事件 那么加上参数clone(true)
$("ul li").click(function () {
$(this).clone(true).appendTo("ul")
})
//替换节点
// $("p").replaceWith($("<strong>你最喜欢的水果是什么</strong>"))
//或者是这样
$("<strong>你最喜欢的水果是什么呢</strong>").replaceAll($("p"))
})
</script>
</html>
十五 包裹节点 替换样式
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<style type="text/css">
.high {
background: red;
}
</style>
</head>
<body>
<h3>街头访问</h3>
<strong title="选择你最喜欢的水果." class="myClass">你最喜欢的水果是?</strong>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<script>
$(function() {
$("strong").click(function() {
$("strong").toggleClass("high");
if ($("strong").hasClass("high")) {
alert("添加了样式")
}
}) // //用small元素把strong元素包裹起来 将所有匹配的元素进行单独包裹
// $("strong").wrap($("<small></small>"))
// //wrapall() 将所有匹配的元素用一个元素包裹起来
// $("ul li").wrapAll($("<small></small>"))
// //wrapinner()方法 不是包裹元素 而是包裹元素中的内容
// $("strong").wrapInner($("<h3></h3>"))
})
</script>
</html>
十六 优化输入框
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址" /><br />
<input type="text" id="password" value="请输入邮箱密码" /><br />
<input type="button" value="登陆" />
</body>
<script>
$(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.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
}
}) })
</script>
</html>
十七 使用val()方法操作select checkbox radio
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<style type="text/css">
.test {
font-weight: bold;
color: red;
}
.add {
font-style: italic;
}
</style>
</head>
<body>
<input type="button" value="设置单选下拉框选中" />
<input type="button" value="设置多选下拉框选中" />
<input type="button" value="设置单选框和多选框选中" />
<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 /> <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>
<script>
$(function () {
//设置单选下拉框的选中
$("input:eq(0)").click(function () {
$("#single option").removeAttr("selected");
//设置选中
// $("#single option:eq(1)").attr("selected",true);
//或者这样
$("#single").val(["选择2号"])
})
//设置多选下拉框选中
$("input:eq(1)").click(function(){
$("#multiple option").removeAttr("selected"); //移除属性selected
// $("#multiple option:eq(2)").attr("selected",true)
//或者这样
$("#multiple").val(["选择2号","选择3号"])
});
//设置单选框和多选框选中
$("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
//或者这样
$(":checkbox").val(["check2","check3"])
// $("[value=radio2]:radio").attr("checked",true);//设置属性checked
//或者这样
$(":radio").val(["radio2"]);
});
})
</script>
</html>
十八 基本节点操作
<html>
<head>
<meta charset="UTF-8">
<title>遍历节点</title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
<script>
//children()方法只考虑子元素而不考虑任何后代元素
var $body = $("body").children();
var $p = $("p").children();
var $ul = $("ul").children();
// alert($body.length);
// alert($p.length);
// alert($ul.length);
// var str = "";
for (var i = 0; i< $ul.length;i++) {
// alert($ul[i].innerHTML);
}
//next()方法用于寻找匹配元素后面紧邻的同辈元素
//得到的是<ul></ul>
var $p1 = $("p").next().children()
alert($p1.length)
//prev()方法获取匹配元素同辈的相邻的前面的元素
//得到p元素
$("ul").prev().css("background","#008000"); //siblings()获取匹配元素相邻的周围的同辈元素
$("ul li:eq(1)").siblings().css("color","blue"); //closest() 获取离匹配元素最近的匹配元素
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
</script>
</html>
十九 文字提示
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font: 80%,"arial black";
color: #555555;
line-height: 24px;
}
p {
clear: both;
margin: 0;
padding: 5px 0;
}
#tooltip {
position: absolute;
border: 1px solid#333333;
background: #f755d1;
color: #333333;
display: none;
}
</style>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a></p>
</body>
<script type="text/javascript">
$(function() {
$("a.tooltip").mouseover(function (e) {
var tooltip = "<div id='tooltip'>"+ this.title +"<\/div>";
$("body").append(tooltip);
$("#tooltip").css({"top":e.pageY +"px",
"left":e.pageX + "px"
}).show("fast");
}).mouseout(function() {
$("#tooltip").remove();
})
})
</script>
</html>
二十 图片提示
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<style type="text/css">
body{margin: 0; padding: 40px; background: #ffffff; color: #555555;
font: 80% arial;
line-height: 180%;
}
ul,li {margin: 0; padding: 0;}
img{border: none;}
li {list-style: none; float: left; display: inline; margin-right: 10px;
border: 1px solid orange;
}
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(function () {
var x = 10;
var y = 20; $("a.tooltip").mouseover(function (e) {
this.Mytitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/><\/div>";
// var tooltip = "<div id='tooltip'><img src= '"+ this.href + "' alt='产品预览' /><\/div>";
$("body").append(tooltip);
$("#tooltip").css({
"top":(e.pageY + y) + "px",
"left":(e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
this.title = this.Mytitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top":(e.pageY + y) + "px",
"left":(e.pageX + x) + "px"
})
})
})
</script> </head>
<body>
<ul>
<li>
<a href="../img/apple_1_bigger.jpg" class="tooltip" title="苹果">
<img src="../img/apple_1.jpg" alt="苹果1" />
</a>
</li>
<li>
<a href="../img/apple_2_bigger.jpg" class="tooltip" title="苹果">
<img src="../img/apple_2.jpg" alt="苹果2" />
</a>
</li>
<li>
<a href="../img/apple_3_bigger.jpg" class = "tooltip" title="苹果">
<img src="../img/apple_3.jpg" alt="苹果3">
</a>
</li>
<li>
<a href="../img/apple_4_bigger.jpg" class="tooltip" title="苹果">
<img src="../img/apple_4.jpg" alt="苹果4" />
</a>
</li>
</ul>
</body> </html>
二十一 事件绑定
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="../css/Style.css">
<script type="text/javascript">
$(function () {
$("#panel h5.head").bind("click",function () { var $content = $(this).next("div.content");
if ($content.is(":visible")) {
$content.hide();
}else {
$content.show();
}
}) //绑定其他的事件
$("#panel h5.head").bind("mouseover",function () {
var $content = $(this).next("div.content");
$content.show();
}) $("#panel h5.head").bind("mouseout",function () {
$(this).next("div.content").hide()
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是JQuery？</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig
创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，
极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、
执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
二十二 阻止事件冒泡 阻止事件默认事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("body").click(function () {
alert("body 元素事件")
})
$("#content").click(function (e) {
alert("div 元素事件")
e.stopPropagation();
})
$("span").click(function (e) {
alert("span 元素事件");
//阻止冒泡 否则会依次相应 span div body 事件
e.stopPropagation();
})
//阻止默认事件
$("a").click(function (event) {
//写了这句代码 点击超链接将失去作用
event.preventDefault();
event.stopPropagation();
//或者写成这样
return false;
})
})
</script>
</head>
<body>
<div id="content">
外层元素
<span>内层span元素</span>
外层元素
</div>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
HTML 学习笔记 JQuery（锋利的JQuery 代码）的更多相关文章
- 【学习笔记】锋利的jQuery（一）选择器
一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...
- 【学习笔记】锋利的jQuery（四）AJAX
一.load()方法 /* *如果没有参数传递,采用GET方式传递 *如果有参数,则自动转换成POST方式传递 *无论Ajax是否请求成功,请求完成后回调函数触发 */ load("test ...
- 【学习笔记】锋利的jQuery（三）事件和动画
一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...
- 【学习笔记】锋利的jQuery（二）DOM操作
一.获取DOM节点 //找祖宗 parent() parents() closest() //找后代 children(); find(); //找兄弟 next()/nextAll() prev() ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- python3.4学习笔记(十三) 网络爬虫实例代码，使用pyspider抓取多牛投资吧里面的文章信息，抓取政府网新闻内容
python3.4学习笔记(十三) 网络爬虫实例代码,使用pyspider抓取多牛投资吧里面的文章信息PySpider:一个国人编写的强大的网络爬虫系统并带有强大的WebUI,采用Python语言编写 ...
- openstack学习笔记一 虚拟机启动过程代码跟踪
openstack学习笔记一 虚拟机启动过程代码跟踪 本文主要通过对虚拟机创建过程的代码跟踪.观察虚拟机启动任务状态的变化,来透彻理解openstack各组件之间的作用过程. 当从horizon界面发 ...
- 【学习笔记】OI玄学道—代码坑点
[学习笔记]\(OI\) 玄学道-代码坑点 [目录] [逻辑运算符的短路运算] [\(cmath\)里的贝塞尔函数] 一:[逻辑运算符的短路运算] [运算规则] && 和 || 属于逻 ...
- JPG学习笔记3（附完整代码）
#topics h2 { background: rgba(43, 102, 149, 1); border-radius: 6px; box-shadow: 0 0 1px rgba(95, 90, ...
- jQuery 学习笔记（一）jQuery 语法
jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程,很容易学习 添加 jQuery 库 <head> <script type="te ...
随机推荐
- BZOJ 4543 2016北京集训测试赛（二）Problem B: thr 既 长链剖分学习笔记
Solution 这题的解法很妙啊... 考虑这三个点可能的形态: 令它们的重心为距离到这三个点都相同的节点, 则其中两个点分别在重心的两棵子树中, 且到重心的距离相等; 第三个点可能在重心的一棵不同 ...
- 全面了解Nginx主要应用场景
http://www.raye.wang/2017/02/24/quan-mian-liao-jie-nginxdao-di-neng-zuo-shi-yao/
- java程序容错
程序最怕出错的方式就是直接闪退 编程应该以这种方式进行,保证结构不出错,数据可容错的方式 比如 fungetsonmfrominternet(){变量 a a=从网络返回数据 return a } 在 ...
- 安装xz
原地址: http://jingyan.baidu.com/album/8cdccae9416720315413cd9e.html 1 获取XZ的安装文件,网络下载xz-5.0.3.tar.bz2安装 ...
- web.xml文件的 xsd引用(或dtd引用)学习
1. 为什么web.xml会有不同版本的xsd引用: JDK依赖变化: 或 servlet(JAVA EE)自身API的改变: 2. 为什么会有dtd和xsd两个版本的区别 我是在这篇文章中看到的,作 ...
- Java父类与子类中静态代码块 实例代码块 静态变量 实例变量 构造函数执行顺序
实例化子类时,父类与子类中的静态代码块.实例代码块.静态变量.实例变量.构造函数的执行顺序是怎样的? 代码执行的优先级为: firest:静态部分 second:实例化过程 详细顺序为: 1.父类静态 ...
- Fresco框架SimpleDraweeView控件的简单使用
首先把网络.SD卡的读写权限添加上:<span style="font-family: Arial, Helvetica, sans-serif;"> </s ...
- flash+xml无法显示中文的解决办法
flash+xml用来做图片动态浏览效果相当不错,被广泛运用于电子相册制作,很多朋友都会从网上下载一些相关的flash源码下载参考,但是经常发现在使用过程中,修改了xml文件中的英文后要么文本不显示, ...
- EasyMvc入门教程-高级控件说明（14）列布局控件
想起刚做网页时候,看着这么大的屏幕,一直在 想该如何布局呢,后来经过Table布局,Div布局,Border布局,列式布局. 目前EasyMvc主要支持12列的列式布局(手机兼容性好).请看下面的例子 ...
- Qt编程简介与基本知识
1. 什么是Qt? Qt是一个基于C++的跨平台应用程序和UI开发框架.它包含一个类库,和用于跨平台开发及国际化的工具. 由挪威Trolltech公司开发,后被Nokia收购,目前被Digia公司收购 ...