高手请在此飘过。。。纯属个人娱乐
Dom对象与Jquery对象互转
首先，我们约束一下（个人习惯）
Jquery 对象我们可以 以”$”符号开始命名
var $count=jquery对象；
dom对象 约束第一个字母为小写开头
var userName=dom对象
例子<div id=”test”></div>
代码如下
Var $test=$(“#test”);//jquery对象
Var test=document.getElementById(“test”);//dom对象
Dom对象转换jquery对象，方法很简单。请看下面
Var $newTest= $(test);
直接将dom对象放入$(你的dom对象)
Jquery对象转换dom对象，可以通过索引index或者get方法转换dom对象
1、 索引方法
var test1=$(“#test”)[0];//取出第一个id为test的dom对象
2、 get方法
var test2=$(“#test”).get(0);//取出第一个id为test的dom对象
下面看2个demo演示
Demo1：DOM -----点击test按钮改变值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//推荐使用原生态操作
//1、dom操作改变button里的value值
var myThis = this; //这里是dom对象
myThis.value = "我是dom";
//2、jquery操作改变button里的value值
//var $this = $(this); //这里是jquery对象
//$this.val("我是jquery改变");
});
});
</script>
</head>
<body>
<input type="text" id="txtName" />
<input id="btn" value="test" name="btn" type="button" />
</body>
</html>
结果：test->我是dom
Demo2：jquery---点击test按钮值立刻变为“我是jquery改变”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//推荐使用原生态操作
//1、dom操作改变button里的value值
// var myThis = this; //这里是dom对象
// myThis.value = "我是dom";
//2、jquery操作改变button里的value值
var $this = $(this); //这里是jquery对象
$this.val("我是jquery改变");
});
});
</script>
</head>
<body>
<input type="text" id="txtName" />
<input id="btn" value="test" name="btn" type="button" />
</body>
</html>
结果：test->我是jquery改变
冲突
默认情况下，jquery用$作为自身快捷方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//这段代码放在这里为了演示冲突
//为了方便，我自定义$冲突方法,其他类库也有可能定义$符号（如prototype）
function $(id) {
return document.getElementById(id);
}
function btnFun() {
//这里演示用jq方法获取文本框的值
alert($("#txtName").val());
}
</script>
</head>
<body>
<input type="text" id="txtName" />
<input id="btn" value="test" name="btn" type="button" onclick="btnFun();" />
</body>
</html>
这段代码意思很简单，点击按钮弹出文本框值。。
在chrome浏览器发现报了一个这样错误：Uncaught TypeError: Cannot call method 'val' of null
报错原因很明显咯：$符号调用我上面自定义$方法，而js只有value这个属性，没有val()方法
如何解决？
方法一：将其中一个类库$替换其他符号来代替（此方法工作量大，出错几率大，不推荐）
方法二：将所有调用jq方法全部用jQuery,而不是使用$
function btnFun() {
//这里演示用jq方法获取文本框的值
alert($("#txtName").val());
}
修改为以下
function btnFun() {
//这里演示用jq方法获取文本框的值
alert(jQuery ("#txtName").val());
}
方法三：
jQuery.noConflict();//将$变量交给上面方法$(或者引入prototype类库)
var $jj= jQuery.noConflict();//将变量交给上面方法$(或者引入prototype类库)，并自自定义$jj
用法：
var $jj= jQuery.noConflict();
function btnFun() {
//这里演示用jq方法获取文本框的值
alert($jj ("#txtName").val());
}
判断对象是否存在
<!--判断对象是否存在--->
<script type="text/javascript">
jQuery(function () {
//dom判断
if (document.getElementById("aa")==null) {
alert("dom判断此对象aa不存在");
}
//jq判断一（推荐）
if (jQuery("#aa").length==0) {
alert("1、jquery判断此对象aa不存在");
}
//jq判断二
if (jQuery("#aa")[0]==null) {
alert("2、jquery判断此对象aa不存在");
}
});
</script>