jQuery

DOM对象和jQuery对象的转换及用法
DOM对象：直接使用JavaScript获取的节点对象
className innerHTML value
jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法
addClass() html() va()
DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
DOM对象转换成jQuery对象
$(DOM对象)
jQuery对象转换成DOM对象
jQuery对象[index]
jQuery对象.get(index)

$的作用

作用1：$(function(){});

1.相当于window.onload = function(){}
2.功能比window.onload更强大
1）window onload一个页面只能写一个,但是可以写多个$(),而不冲突

2）Window onload要等整个页面加载完以后再执行(包括图片,超链接,音频视频等),但是$的执行时间要早

3.完整形式是jQuery(document).ready(…);$(document).ready(…)

作用2:$(selector)

   选择器
   jQuery具有强大的选择器功能

作用3：$(DOM对象)
将DOM对象转换成jQuery对象

选择器：
基本选择器：
标签选择器：$(“a”);

ID选择器：$(“#id”);

类选择器：$(“.class”);

通配选择器：$(“*”);

并集选择器：$(“elem1,elem2,elem3”);

后代选择器：$(“ul li”);

父子选择器：$(“ul>li”);

后面第一个兄弟：$(“prev+next”);

后面所有兄弟：$(“priv~next”);

属性选择器：
//属性选择器

		$("a[herf]");
		$("a[href][id]");
		$("a[href=]");
		$("a[href!=]");
		$("a[href^=]");//以什么开头
		$("a[href$=htm]");
		$("a[href*=]");//包含什么
		
		//位置选择器
		$("p:first");
		$("p:last");
		$("p:odd");//索引从0开始,奇数项
		$("p:even");
		$("p:eq(3)");//equals
		$("p:gt");//great than
		$("p:lt");//less than
		
		//针对上级元素
		$("p:first-child");
		$("p:last-child");
		$("p:only-child");//第一个和最后一个
		$("p:nth-child()");//从1开始计数，选择第几个
		$("p:nth-child(odd)");
		$("p:nth-child(3n)");//每3个选一个
		$("p:nth-child(3n+1)");//从第几个开始每三个选一个
	$("p:not(p:nth-child(3n))");

表单选择器：
$(function(){
//:text :password :radio :checkbox :hidden :file :submit
// var arr = $(":input");
// var arr = $(":text");
// var arr = $(":password");
// var arr = $(":radio");
// var arr = $(":checkbox");
// var arr = $(":hidden");
// var arr = $(":file");
// var arr = $(":submit");

//:selected :checked :enabled :disabled
// var arr = $(":selected");
// var arr = $(":checked");
// var arr = $(":enabled");
// var arr = $(":disabled");

//:hidden :visible :not
// var arr = $(":hidden:not(input)");
var arr = $(":visible");
console.info(arr.length);
for(var i=0;i<arr.length;i++){
console.info(arr[i]);
}
});

内容选择器:
function(){

			//$("td:empty").addClass("myClass");	
			//$("td:parent").addClass("myClass");
			//$("td:contains(Value)").addClass("myClass");
			
			//$("div:contains(Hello)").addClass("myClass"); //文本 内容
			//$("div:has(p)").addClass("myClass"); //子元素
			$("div:has(p)").addClass("myClass");
			}

事件的绑定

动画
function hideElem(){
// $("#img1").hide();//立即隐藏
// $("#div1").hide();
// $("#img1").hide(3000);//延时隐藏，改变宽高
// $("#div1").hide(3000);
// $("#img1").fadeOut(3000);//淡出隐藏，改变透明度
// $("#div1").fadeOut(3000);
$("#img1").slideUp(3000);//滑入隐藏，改变高度
$("#div1").slideUp(3000);
}
function showElem(){
// $("#img1").show();//立即显示
// $("#div1").show();
// $("#img1").show(3000);//延时显示
// $("#div1").show(3000);
// $("#img1").fadeIn(3000);//改变透明度显示，带延时
// $("#div1").fadeIn(3000);
$("#img1").slideDown(3000);//滑出显示
$("#div1").slideDown(3000);
}

操作文本
function func1(){
//获取文本
var str = $("#div1").html();//获取div1中所有的内容，包含标签
// var str = $("#div1").text();//获取div1中所有的内容，不包含标签
//弹出文本
alert(str);
//写入文本
$("#div2").html(str);//写入div2中，不包含标签
// $("#div2").text(str);//写入div2中，包含标签
}
function func2(){
//获取username中的value值
var str = $("#username").val();
//重写value值
$("#username").val(str+“123”);
}