【jQuery】2.jquery基础知识2
来源:互联网 发布:青岛知行国际 好不好 编辑:程序博客网 时间:2024/06/03 19:57
一、jquery对象和DOM对象
1.DOM对象
(1)DOM,文档对象模型,每一份DOM都可以表示成一棵树
(2)从DOM树中可以看出各个元素之间的关系
(3)可以用getElementById或者getElementsByTagName等方法来获取元素
节点,这样得到的DOM元素就是DOM对象。DOM对象可以使用原生js中
的方法,比如innerHtml等
例子:
2.jquery对象
jquery对象是由jquery包装过后的DOM对象,它可以使用jquery库里面的方法
jquery对象无法使用DOM对象中的方法(如果DOM对象中的方法在jquery被改写过,那么可以使用DOM对象中这个被改写的方法)
例子:
二、DOM对象和jquery对象的互相转换
(1)jquery对象转成成DOM对象
有两种方法
1.使用index
2.使用get()方法
测试:
(2)DOM对象转换成jquery对象
只要把DOM对象用$()包起来就OK了
测试:
三、jquery与其它js库共存
我们使用js库的时候,不一定会仅仅使用jQuery,还有可能使用其他的js库(如prototype),那么有可能会产生冲突,所以要有一种方法让它们共存。
共存方法:使用jQuery.noConflict()方法释放$的权
测试:
1.DOM对象
(1)DOM,文档对象模型,每一份DOM都可以表示成一棵树
(2)从DOM树中可以看出各个元素之间的关系
(3)可以用getElementById或者getElementsByTagName等方法来获取元素
节点,这样得到的DOM元素就是DOM对象。DOM对象可以使用原生js中
的方法,比如innerHtml等
例子:
<script> var p=document.getElementById('p'); //用DOM方法得到的对象,就是DOM对象 alert(p.innerHTML);</script>
2.jquery对象
jquery对象是由jquery包装过后的DOM对象,它可以使用jquery库里面的方法
jquery对象无法使用DOM对象中的方法(如果DOM对象中的方法在jquery被改写过,那么可以使用DOM对象中这个被改写的方法)
例子:
<script> var p=$('p'); //用jQuery选择器得到的对象,就是jQuery对象 alert(p.html());</script>
二、DOM对象和jquery对象的互相转换
(1)jquery对象转成成DOM对象
有两种方法
1.使用index
2.使用get()方法
测试:
<!doctype html><html lang="en"><head><meta charset="GBK"><title>demo2.1</title><script src="jquery-1.8.0.min.js"></script></head><body><input type="text" id="a" value="111111"/><script>var input=$('#a');alert(input.val());alert(input[0].value);alert(input.get(0).value);//jquery对象转换成DOM对象的方法//1.可以使用索引,index//2.可以使用get(index)方法</script></body></html>
(2)DOM对象转换成jquery对象
只要把DOM对象用$()包起来就OK了
测试:
<!doctype html><html lang="en"><head><meta charset="GBK"><title>demo2.2</title><script src="jquery-1.8.0.min.js"></script></head><body><input type="text" id="a" value="111111"/><script>var input=document.getElementById('a');alert($(input).val());</script></body></html>
三、jquery与其它js库共存
我们使用js库的时候,不一定会仅仅使用jQuery,还有可能使用其他的js库(如prototype),那么有可能会产生冲突,所以要有一种方法让它们共存。
共存方法:使用jQuery.noConflict()方法释放$的权
测试:
<!doctype html><html lang="en"><head><meta charset="GBK"><title>demo2.3</title><script src="jquery-1.8.0.min.js"></script><script src="prototype.js"></script></head><body><input type="text" id="a" value="aaaaaa"/><script>jQuery.noConflict();alert($F('a'));//prototype获取value值的方法alert(jQuery('#a').val());//jQuery获取value值的方法</script></body></html>
这样就会避免两种“$”权限冲突,我们两种js库就都可以使用了。
转载请注明出处:http://blog.csdn.net/acmman/article/details/48971545
0 0
- 【jQuery】2.jquery基础知识2
- jQuery基础知识
- jQuery基础知识
- JQuery基础知识
- JQuery基础知识
- JQuery基础知识
- jquery基础知识
- jQuery 基础知识
- jQuery基础知识
- Jquery基础知识
- jQuery基础知识
- JQuery基础知识
- jQuery基础知识
- jquery 基础知识
- jquery基础知识
- jquery基础知识
- jQuery基础知识
- jquery基础知识
- Java解析 APK AndroidManifest.xml
- 在textView中显示提示文字
- ios 搜索框
- zookeeper(一)伪分布搭建
- Python学习路线
- 【jQuery】2.jquery基础知识2
- ListView之SimpleAdapter的使用
- LSP注入概述
- 通过分析 JDK 源代码研究 TreeMap 红黑树算法实现
- Java____变量的初始化与赋值相关
- grep -q用于if逻辑判断
- Paxos协议
- angular.js基础—服务(service)及其调用
- C++结构体字节对齐