学习jquery框架一点点心得
高手请在此飘过。。。纯属个人娱乐
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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
2012-03-24 wp7 页面方向