【jQuery】2.jquery基础知识2

简介:
一、jquery对象和DOM对象
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

相关文章
|
JavaScript 前端开发 API
jQuery基础知识
jQuery基础知识
132 0
|
JavaScript 前端开发 索引
前端学习:jQuery基础知识
前端学习:jQuery基础知识
138 0
前端学习:jQuery基础知识
|
10天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
48 21
|
11天前
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
41 16
|
6天前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
26 9
|
9天前
|
移动开发 JavaScript 前端开发
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
|
11天前
|
JavaScript
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
|
10天前
|
JavaScript 容器
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
|
7天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
19 2
|
7天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。