juery访问dom元素与传统js访问dom元素的不同

来源：互联网发布：vb高级教学视频教程编辑：程序博客网时间：2024/06/07 06:13

1.什么是dom对象？
dom（document object model,文本对象模型），也就是我们常见的页面，每一个页面都是对应一个文本对象模型。
2.什么是jquery对象？
在jquery库中，通过自身的方法获取页面的元素，称为jQuery对象。
3.代码（主要功能：比较传统js与jquery访问dom元素的不同）

（1）js代码获取页面所传入的值

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>传统js与juqery访问dom对象的不同</title><style type="text/css">.divFrame{width:260px;border:soild 1px #666;font-size:10pt;}.divTitle{background-color:#eee;padding:5px;}.divContent{padding:8px;font-size:9pt;}.divTip{padding:8px;font-size:9pt;width:244px;border:soild 1px #666;margin-top:5px;display:none;}.txtClass{birder:soild 1px #ccc;}.divBtn{padding-top:5px;}.divBtn .btnCss{border:1px soild #535353;width:60px;}</style><script type="text/javascript">function btnClick(){    //获取姓名    var Txtname=document.getElementById("Text1").value;    //获取性别    var raSex = (Radio1.checked)?"男":"女";    //是否结婚    var isMarry=(Checkbox.checked)?"已婚":"未婚";    document.getElementById("divTip").style.display="block";    //设置文本元素的值    document.getElementById("divTip").innerHTML="姓名:"+Txtname+"<br/>+性别:"+raSex+"<br/>+是否结婚:"+isMarry;}</script></head><body>    <div class="divFrame">        <div class="divTitle">请输入一下信息</div>        <div class="divContent">            姓名:<input id="Text1" type="text" class="txtCss" /> <br/>            性别:<input id="Radio1" name="rdoSex" type="radio" value="男"/> 男                <input id="Radio2" name="radoSex" type="radio" value="女"/> 女        </div>        婚否:<input id="Checkbox" type="checkbox"/>            <div class="divBtn">                <input id="Button1" type="button"  value="提交" class="btnCss" onClick="btnClick()"/>            </div>    </div>    <div id="divTip" class="divTip"></div></body></html>

(2)juery实现获取页面输入元素代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>传统js获取页面输入值与jquery获取页面传入值的不同</title><script type="text/javascript" src="jquery-1.10.1.js"></script><style type="text/css">.divFrame{width:26px;border:solid 1px #666;font-size:10pt;}.divTitle{background-color:#eee;padding:5px;}.divContent{padding:8px;font-size:9pt;}.divTip{width:244px;border:soild 1px #666;padding:8px;font-size:9pt;display:none;margin-top:5px;}.textCss{border:1px #ccc soild;}.divBtn{padding-top:5px;}.divBtn .btnCss{border:1px #535353 soild;width:60px;}</style><script type="text/javascript">function btnClick(){    var TxtName=$("#Text1").val();    var RadioSex = $("#Radio1").is(":checked")?"男":"女";    var checkMarry = $("#Checkbox").is(":checked")?"已婚":"未婚";    $("#divTip").css("display","block").html("姓名:"+TxtName+"<br/>+性别:"+RadioSex+"<br/>+是否结婚:"+checkMarry);}</script></head><body>      <div>        <div class="divTitle">请输入一下信息</div>        <div class="divContent">            姓名:<input id="Text1" type="text" class="txtCss" /> <br/>            性别:<input id="Radio1" name="rdoSex" type="radio" value="男"/> 男                <input id="Radio2" name="radoSex" type="radio" value="女"/> 女        </div>        婚否:<input id="Checkbox" type="checkbox"/>            <div class="divBtn">                <input id="Button1" type="button"  value="提交" class="btnCss" onClick="btnClick()"/>            </div>    </div>    <div id="divTip" class="divTip"></div></body></html>

后记：
传统js直接访问文档对象获取对象的值，jquery通过调用jquery库中的方法获取文档对象，操作更加的简洁。日常工作中用的比较多的是jquery对dom元素的抓取这一主要功能，操作起来更加简洁和方便。

关于自己：
关于工作简单的人际关系对于程序员来讲是一件让人快乐的事情，编写程序本身需要集中注意力和大量的思考，保持注意力是比较重要的一件事情。对于工作必须按时的完成上级交待下来的任务。在准确的时间完成，这一点对于任何行业来讲都是最基本的工作准则。
最近在工作中遇到一些问题，不能很好地处理与同事之间的关系，自己工作中也有一点点小小的骄傲和自满。
个人成长比金钱更加重要，钱是会消耗掉的，自己成长是永久有用的。钱可以尽快解决眼前的一些问题，也可以带来高刺激的快乐，当金钱消耗完的时候，自己究竟还剩下些什么？
个人成长带来的快乐是永久的，你所用心思考的一些问题，你所认真完成的事情，你花精力看的书，并不会在给你带来高峰值得快乐，有时候并不会立马产生反应。但是在某些特殊的时候，他会忽然给你一些只言片语的提示，解决一些你难以言表，但又苦苦困扰你的烦心事，可以更加从容不迫的面对生活,不卑不吭的处理自己所需要面对的事情。
第一影响是很难别改变的，人眨眼之间做出来的结论并不是没有科学根据的，感性是长期进化的产物。当一位朋友离开我们，我们回忆他时，第一次与她见面，第一次和他一起完成的事情，第一次和他的交谈，我们都会映像深刻。所以面对工作，我们要在才入职的时候表现更加的得体，在以后的工作中才不会遇到一些不必要的麻烦事。
勤奋是我现在所缺少的品质，在以后的生活和工作中，要积极完成一些自己力所能及的事情，工作中或多或少都会遇到问题。自己必须得积极面对自己的工作，自己得做到熟练，不能停止在自己知道这个事情的基础上，更加多的去练习。

0 0