jQuery基础(一)

什么是jQuery？

    jQuery是JavaScript的一种快速和简洁的框架，兼容css3，还兼容各种浏览器，文档说明齐全，应用详细，成熟插件也很多。为用户提供了优秀的代码块，封装了JavaScript常用的功能代码，jQuery具有独特的链式语法和短小清晰的多功能接口，有css选择器，同样可以优化HTML文档操作，事件处理，动画设计。

jQuery语法

导入：同JavaScript的外联式一样

基本语法：jQuery(选择器)或者$(选择器)

//页面加载函数---不会被覆盖
                $(function(){
			//获得jQuery对象
			var $obj=$("#myText");
			alert($obj.value);
		});
              
               $(document).ready(function(){
			var $obj=$("#myText");
			alert($obj.value);
		});

DOM对象和jQuery对象的转换

//dom对象
			var userObj = document.getElementById("usernameId");
			
			//将dom对象转换成jquery对象    $(dom)
			var $userObj = $(userObj);
			//alert($userObj.val());
			
			//jquery对象转换成dom对象
			//jquery的底层是一个数组 对象[index] 或者  对象.get(index)
			//var user = $userObj[0];
			var user = $userObj.get(0);

五类选择器(详见博客)

效果

基本效果；滑动；淡入淡出

<script type="text/javascript">
$(function(){
//显示隐藏
			$("#b1").click(function(){
				$("#b1Div").toggle(3000);
			});
				
			//滑出滑入
			$("#b2").click(function(){
				$("#b2Div").slideToggle(3000,function(){
					alert(1);
				});
			});
			//淡入淡出
			$("#b3").click(function(){
				$("#b3Div").fadeToggle(3000,function(){
					alert(1);
				});
			});
		});	
	</script>
        <input type="button" id="b1" value="显示/隐藏 b1Div" />
	<div id="b1Div"></div> <br/>
	<input type="button" id="b2" value="滑出/滑入b2Div"/>
	<div id="b2Div"></div> <br/>
	<input type="button" id="b3" value="淡出/淡入b3Div" />
	<div id="b3Div" style="background-color: red;"></div>

CSS类

addClass()和removeClass()

<style type="text/css">
			.myTrColor{
				background-color: red;
			}
			.myOverTrColor{
				background-color: blue;
			}
		</style>
		<script>
			$(function(){
				$("tr:odd:gt(0)").addClass("myTrColor");
				//链式操作
				$("tr:gt(1)").mouseover(function(){
					$(this).addClass("myOverTrColor");
				}).mouseout(function(){
					$(this).removeClass("myOverTrColor");
				});
			});
		</script>

Html代码、text和val的比较
1、获取
html：获得标签
text：不会获得标签

        //显示：大家好
	alert($("#myDiv").text());
	//显示：<a href="">大家好</a>
	alert($("#myDiv").html());

<div id="myDiv"><a href="">大家好</a></div>

2、赋值

text：不会解析标签

html：会解析标签

$(function(){
				//获得jQuery对象
				$("#myDiv").text("<a href=''>你好</a>");
				alert($("#myDiv").text());
				//显示：<a href=''>你好</a>
				$("#myDiv").html("<a href=''>你好</a>");
				alert($("#myDiv").html());
				//显示：你好
			});

<div id="myDiv"></div>

3、val--一个方法两个用途

val():取值

val(参数):赋值

        //取值：hello world
	alert($("#myText").val());
	//赋值：你好世界
	$("#myText").val("你好世界")

<input type="text" id="myText" value="hello world" />

jQuery是JavaScript的框架，将JavaScript中复杂的代码简单化，给用户带来方便，大大提高效率，jQuery还有其他内容，请见下一篇博客