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库了。

时间: 2024-10-03 14:45:10

jQuery3访问并且控制dom对象的相关文章

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>控制DOM对象</title> <style type="text/css&

JS总结之二:DOM对象控制HTML

DOM对象控制HTML 1.方法 getElementsByName( ) ——获取name getElementsByTagName( ) ——获取元素 getAttribute( ) ——获取元素属性 setAttribute( ) ——设置元素属性 childNodes( ) ——访问子节点 parentNode( ) ——访问父节点 createElement( ) ——创建元素节点 createTextNode( ) ——创建文本节点 inserBefore( ) ——插入节点 rem

DOM对象控制HTML

DOM对象将HTML文档变成元素,属性,文本的树结构. 元素节点:标签一般就是元素. 属性节点:a标签中加入的超链接href就是属性. 文本节点:一般是展示给用户看的<p>标签内的文字,table表格中<tr>中的文字,ul中<li>的文字. 节点属性: document.getElementById("xxx");这时获取id为xxx的元素节点.因为id的名称是一定的,唯一标识不会重复.所以获取的元素节点是一个单独的量. document.getE

Javascript DOM对象控制HTML

首先需要了解什么是 JavaScript DOM对象以下是一些常用的方法: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <p name="pName">one</p>    &

JS操作DOM对象(访问节点)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>访问节点</title> <!-- DOM(Document Object Model) 文档对象模型 HTML-DOM CSS-DOM XML-DOM DOM-CORE noteType的返回值: 1 :元素节点 2 :属性节点 3 :文本节点 8

前端05.js入门之BOM对象与DOM对象。

一.关于BOM对象. BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 用于操控用户浏览器. 1.window对象: 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: window对象不需要创建对象,直接使用即可. 下面是window对象的常用方法: alert()            显示带有一段消息和一

JavaScript之DOM-9 HTML DOM(HTML DOM概述、常用HTML DOM对象、HTML表单)

一.HTML DOM 概述 HTML DOM 概述 - HTML DOM 定义了用于 HTML 的一系列标准对象,以及访问和处理 HTML 文档的标准方法 - HTML 标签对象化 - 将网页中的每个元素都看作是一个对象 常用 HTML DOM 对象 标准 DOM 与 HTML DOM - HTML 标签对象化 - createElement - appendChild - setAttribute - removeAttribute - nodeName - ... - HTML DOM 提供

前端之JavaScript:JS之DOM对象三

js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

js之DOM对象三

js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">