jQuery3访问并且控制dom对象
3.控制dom对象
下面是代码示例（本人费了九牛二虎之力调试，从c++跳到java路也不是那么好走），特别注意的地方：代码中所有的字符包括符号必须是英文的，jsp、JavaScript、CSS大小写不一致，不区分大小写的鄙人知道的也就只有sql了；另外需要注意的地方，jQuery调用dom对象的时候用到$(#对象的id) 千万别把#号忘掉。
提供一个比较好的调试方法，想Javascript中加入alert(...)来断定程序可以抵达什么地方，病灶在哪里，不管C++还是Java调试方法都是一样的。
$(function());它是 $(document).ready(function(){...})的简写形式意思就是页面载入后执行...的代码.是jq中最重要的一句话,基本上是必须的.所有页面载入有执行的代码都要写着里面。
最后补充一点：Javascript中需要在<script type="test/javascript">function btnClick(){...}</script>然后<input id="button1" type="button" value="提交" class="btnCss" onClick="btnClick();"/>；然而在使用jQuery之后就比较轻松了：$(function(){ $("#button1").click(function(){} });并且onClick="btnClick();"不用写了
<!DOCTYPE html>
<html>
<head>
<title>Accordion Menus</title>
<style type="text/css">
.divFrame{width:260px;border:solid 1px #666;font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:8px;font-size:9pt}
.divTip{width:244px;border:solid 1px #666;
padding:8px;font-size:9pt;
margin-top:5px;display:none }
.txtCss{border:solid 1px #ccc}
.divBtn{padding-top:5px}
.divBtn.btnCss{border:solid 1px #535353;width:60px;}
</style>
<script language="javascript" src="jquery-2.1.1.js"> </script>
<script language = "JavaScript" type="text/javascript">
$(function(){
$("#button1").click(function(){
//获取文本框的值
var oTxVaule=$("#Text1").val();
//获取单选框按钮值
var oRdoValue=$("#Radio1").is(":checked")?"男":"女";
//获取复选框按钮的值
var oChkValue=$("#Checkbox1").is(":checked")?"已婚":"未婚";
//显示提示文本元素和内容
$("#divTip").css("display","block").html(oTxVaule+"<br>"+oRdoValue+"<br>"
+oChkValue);
alert(oChkValue);
});
});
</script>
</head>
<body>
<div class="divFrame">
// 引入CSS的divTitle类
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
//该文本框的id设为Text1,如果jQuery调用的时候就用$(#Text1)
姓名：<input id="Text1" type="text" class="tstCss"/> <br/>
性别：<input id="Radio1" name="radoSex" type="radio" value="男" />男 <br/>
<input id="Radio2" name="radoSex" type="radio" value="女" />女 <br/>
婚否：<input id="CheckBox1" type="checkbox"/>
<div class="divBtn"> <input id="button1" type="button" value="提交" class="btnCss" />
</div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>
再次补充，这次补充完全是举一反三的结果，<script language="javascript" src="jquery-2.1.1.js"> </script>这条语句将jQuery库导入到了当前页面，我便想到能否将自己写的js单独放到一个js文件中，这样jQuery库还能否调用到？经过试验我的想法是正确的：
step1：<script language="javascript" src="jquery-2.1.1.js"> </script>
<script type="text/javascript" src="script03.js"></script>
step2： $(function(){
$("#button1").click(function(){
//获取文本框的值
var oTxVaule=$("#Text1").val();
//获取单选框按钮值
var oRdoValue=$("#Radio1").is(":checked")?"男":"女";
//获取复选框按钮的值
var oChkValue=$("#Checkbox1").is(":checked")?"已婚":"未婚";
//显示提示文本元素和内容
$("#divTip").css("display","block").html(oTxVaule+"<br>"+oRdoValue+"<br>"
+oChkValue);
alert(oChkValue);
});
//另外的一个方法
$("#divColor").click(function(){
$(this).toggleClass("divClick").html("点击后的样式");
});
});具体原因我是这么认为的：通过step1，将jQuery和js放入到了同一个页面中了，它们与其他jsp信息融合成了一个整体，当然js可以调用jQuery库了。