实践jquery 高级编程-CSDN博客

本文链接：https://blog.csdn.net/kaka1001/article/details/84511333

// 最近买了本jquery高级编程的书在此和大家分享

2012-12-11 10:23:00// jquery 的链式写法***************

<html>
<head>
<title>jQuery 高级编程</title>
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>   // 1.8.2是jquery最新版的插件文章可下载
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px 0px;font-size:12px; text-align:center;display:none;}
.curcol{ background-color:#CCC}
</style>
<script type="text/javascript">
$(function(){
    $(".content").html("您好！欢迎来到jQuery 的精彩世界！");
    $(".title").click(function(){    // 这里不能用oncick 如用会报错：[11:27:46.636] TypeError: $(...).onclick is not a function @ http://localhost/test.html:25 所以只能用click
       $(this).addClass("curcol").next(".content").css("display","block");   // jquery 的链式写法
        // 当前对象 title添加样式curcol 以及它的下个类名为content的显示
    });

});
</script>
</head>
<body>
<div class="iframe">
<div class="title" id="title"> 标题</div>
<div class="content"></div>
</div>
</body>
</html>

// 2013-12-11 14:40:00 *********************javascript的用法以及js的三木运算

<!DOCTYPE html>
<html>
<head>
<title> 控制DOM 对象</title>
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;}
.title{ padding:6px;background-color:#EEE;}
.content{ padding:8px;font-size:12px;}
.tip{ background-color:#EEE;display:none; font-size:12px;padding:8px;}
.txt{ border:solid 1px #888;}
.btn{ border:solid 1px #888;width:60px;}
.w260{ width:260px;}
</style>
<script type="text/javascript">
function btn_Click(){
// 获取文本框的值
var oTxtValue=document.getElementById("Text1").value; // 通过DOM方式取值
// 获取单选框按钮值
var oRdoValue=(Radio1.checked)?" 男":" 女"; // 第一次看到js也有三木运算效率不错哟
// 获取复选框按钮值
var oChkValue=(Checkbox1.checked)?" 已婚":" 未婚";
// 显示提示文本元素
　　　　　　document.getElementById("Tip").style.display="block";
// 设置文本元素的内容
document.getElementById("Tip").innerHTML=
oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue;
}
</script>
</head>
<body>
<div class="iframe">
<div class="title"> 请输入如下信息</div>
<div class="content">
姓名：<input id="Text1" type="text" class="txt"/><br />
性别：<input id="Radio1" name="rdoSex" type="radio" value=" 男" /> 男
<input id="Radio2" name="rdoSex" type="radio" value=" 女" /> 女<br />
婚否：<input id="Checkbox1" type="checkbox" /><br /><br />
<input id="btnSubmit" type="button" value=" 提交" class="btn"
οnclick="btn_Click();" /><br /><br />
</div>
<div id="Tip" class="tip"></div>
</div>
</body>
</html>

// 那些标签太繁琐了

// 隔行换色*****************

<title> 使用JavaScript 实现隔行变色</title>
<style type="text/css">
body{font-size:12px;text-align:center}
#tbStu{width:260px;border:solid 1px #666;background-color:#eee}
#tbStu tr{line-height:23px}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>

// 上面的js太繁琐看jquery 一招搞定

$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
})
</script>

// 匹配元素

$(function(){          //ID 匹配元素      　显示ID 为divOne 的页面元素
    $("#divOne").css("display","block");
})
$(function(){    // 元素名匹配元素     显示元素名为span 的页面元素
    $("div span").css("display","block");
})
$(function(){        // 类匹配元素      显示类别名为clsOne 的页面元素
    $(".clsFrame .clsOne").css("display","block");
})
$(function(){             // 匹配所有元素       显示页面中的所有元素
    $("*").css("display","block");
})
$(function(){    // 合并匹配元素      显示ID 为divOne 和元素名为span的页面元素
    $("#divOne,span").css("display","block");
})

<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>

// 未完待续敬请期待