<html>
<head>
<title>jQuery</title> <!--导入jquery库-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
jQuery(document).ready(
function () {
alert("AA:jquery加载成功...");
}
); $(document).ready(
function () {
alert("BB:jquery加载成功...");
}
); $(
function () {
alert("CC:jquery加载成功...");
}
)
*/
$(
function () {
$("#but").click(
function () { alert("按钮事件") }
)
}
)
</script>
</head>
<body>
<div >jQuery</div>
1. 页码加载监听</br>
测试添加事件</br>
<input type="button" value="按钮" id="but"/>
</body>
</html>

rs:

2.Jquery对象和document对象转换

<html>
<head>
<title>jQuery</title>
<!--导入jquery库-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript"> $(function () {
$("#but1").click(
function () {
var oMsg = document.getElementById("msg");//Dom对象
alert("Dom对象的属性 : " +oMsg.innerHTML);
}); $("#but2").click(
function () {
var $msg = $("#msg");//jquery对象
alert("jquery对象的方法 : " + $msg.text());
//alert($msg.innerHTML); //jquery对象不能访问dom属性
}); $("#but3").click(
function () {
var oMsg = document.getElementById("msg");//Dom对象
//转换
//var $msg = $(oMsg);
var $msg = jQuery(oMsg);
alert("jquery对象的方法 : " +$msg.text());
}); $("#but4").click(
function () {
var $msg = $("#msg");//jquery对象
//转换
//var oMsg = $msg.get(0);
var oMsg = $msg[0];
alert(oMsg.innerHTML); //jquery对象不能访问dom属性
/*
var show = "";
for(var name in $msg) {
show+= name + " : " + $msg[name] + "\n";
}
alert(show);
*/
}); $("#but5").click(
function () {
//var $msg = $("#message");//jquery对象
var $msg = $("#username");
//alert($msg.html());
//alert($msg.text());
alert($msg.val());
}); $("#but6").click(
function () {
var $msg = $("#message");
//$msg.html("<font color='blue'>xml</font>");
$msg.text("oracle");
}); $("#but7").click(
function () {
var $img = $("#img"); alert($img.attr("src"));
$img.attr("src","p2.jpg"); });
})
</script>
</head>
<body>
<div >jQuery对象</div>
1. 对象<br/>
<span id="msg">软件</span><br/>
<input type="button" value="DOM对象" id="but1"/>
<input type="button" value="jquery对象" id="but2"/> <input type="button" value="DOM->jquery" id="but3"/>
<input type="button" value="jquery->DOM" id="but4"/><br/>
2. 对象方法<br/>
<span id="message" value="java"><h3>java</h3></span></br>
<input type="text" value="张三" id="username"/><br/>
<img src="2.gif" id="img"/>
<br/> <input type="button" value="取值" id="but5"/> <input type="button" value="赋值" id="but6"/>
<input type="button" value="属性" id="but7"/>
</body>
</html>

rs:

javascript 第26节 jQuery对象的更多相关文章

  1. javascript 第28节 jQuery事件、迭代、样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. javascript 第27节 jQuery选择器

    下面的html需要以下2个文件: 1.style.css div,span,p { width:140px; height:140px; margin:5px; background:#aaa; bo ...

  3. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  4. jQuery对象和普通DOM对象的区别

    1.DOM对象DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.根据W3C DOM规范,DOM是HTML与XML的应用编程接 ...

  5. jquery对象转成dom对象

     jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能.我们使用jQuery的同时也能混合Java ...

  6. jquery对象和javascript对象相互转换

    本文转载:http://jeiofw.blog.51cto.com/3319919/786506 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuer ...

  7. JavaScript DOM对象和JQuery对象相互转换

    1.分析源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

  9. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

随机推荐

  1. (step 4.3.5)hdu 1035(Robot Motion——DFS)

    题目大意:输入三个整数n,m,k,分别表示在接下来有一个n行m列的地图.一个机器人从第一行的第k列进入.问机器人经过多少步才能出来.如果出现了循环 则输出循环的步数 解题思路:DFS 代码如下(有详细 ...

  2. Excel数据导入导出

    1.将sql数据库表中的数据导入到Excel表格里: 方法一.使用StreamWrite对象,这里要注意的是 用“\t”换列,StreamWrite对象的WriteLine方法 一行一行写入. pub ...

  3. RocketMQ在linux平台下环境搭建

    RocketMQ在linux下部署运行和window类似,只不过启动namesrv和broker是通过mqnamesrv.sh 和 mqbroker.sh来启动的. 一.  环境搭建 需要jdk1.6 ...

  4. Why Does Everyone Else Appear to Be Succeeding?

    Why Does Everyone Else Appear to Be Succeeding?  —Steven G. Krantz When you are a student, it will a ...

  5. Struts—自定义一个简单的mystruct

    传统mvc开发总结: 1. 跳转代码写死,不灵活 2. 每次都去写servlet,web.xml中配置servlet! (配置目的: 请求, Servlet处理类) 一个简单的struct案例,描述如 ...

  6. Cocos2d-x——CocosBuilder官方帮助文档翻译1 使用自定义类

    原创:请注明转载! 在Cocos2d-x中使用CocosBuilder 使用自定义类 CocosBuilder的使用方法是通过自定义类.在CocosBuilder中选中一个对象并在属性栏中输入自定义类 ...

  7. hdu 5480 Conturbatio 线段树 单点更新,区间查询最小值

    Conturbatio Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=54 ...

  8. Nginx + Tomcat + Session

    分别下载 tomcat http://archive.apache.org/dist/tomcat/tomcat-7/v7.0.22/bin/apache-tomcat-7.0.22.tar.gz n ...

  9. iOS开发——数据持久化Swift篇&模型对象归档

    模型对象归档 import UIKit class ViewController: UIViewController { @IBOutlet weak var textField: UITextFie ...

  10. 【转】在XCode工程中创建bundle包

    http://www.giser.net/?p=859 Bundle Programming Guide: https://developer.apple.com/library/ios/docume ...