jquery九类选择器分类介绍

jquery九类选择器

可见性选择器

//1)查找隐藏的tr元素的个数
	//alert( $("table tr:hidden").size() );
	
//2)查找所有可见的tr元素的个数
//alert( $("table tr:not(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡	、

属性选择器

//1)查找所有含有id属性的p元素个数
	//alert( $('p[id]').size() );
		
 	//2)查找所有name属性是newsletter的input元素，并将其选中
	//$("input[name='newsletter']").attr("checked","checked");
 	
  	//3)查找所有name属性不是newsletter的input元素，并将其选中
	//$("input[name!='newsletter']").attr("checked","true");

  	//4)查找所有name属性以'news'开头的input元素，并将其选中
	//$("input[name^='news']").attr("checked","checked");
		  	
  	//5)查找所有name属性以'letter'结尾的input元素，并将其选中
  	//$("input[name$='letter']").attr("checked","checked");
  	
  	//6)查找所有name属性包含'news'的input元素，并将其选中
	//$("input[name*='news']").attr("checked","checked");
  	
  	//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
  	$("input[id][name$='letter']").attr("checked","true");

子元素选择器

/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function(){
	alert( $(this).text() );
});
*/
	
/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function(){
	alert( $(this).text() );
});
*/

/*4)迭代每个ul中第2个li元素中的内容,索引从1开始（nth-child从1开始，eq是从0开始）
$("ul li:nth-child(2)").each(function(){
	alert( $(this).text() );
});*/

//3)在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function(){
	alert( $(this).text() );
});

表单选择器

//1)查找所有input元素的个数
//alert( $("input").size() );//10，找input标签
//alert( $(":input").size() );//13，找input标签和select/textarea/button
	
//2)查找所有文本框的个数
//alert( $(":text").size() );

//3)查找所有密码框的个数
//alert( $(":password").size() );

//4)查找所有单选按钮的个数
//alert( $(":radio").size() );

//5)查找所有复选框的个数
//alert( $(":checkbox").size() );

//6)查找所有提交按钮的个数
//alert( $(":submit").size() );

//7)匹配所有图像域的个数
//alert( $(":images").size() );

//8)查找所有重置按钮的个数
//alert( $(":reset").size() );

//9)查找所有普通按钮的个数
//alert( $(":button").size() );

//10)查找所有文件域的个数
//alert( $(":file").size() );

//11)查找所有input元素为隐藏域的个数
//alert( $(":input:hidden").size() );

表单对象属性选择器

//1)查找所有可用的input元素的个数
//alert( $("input:enabled").size() );

//2)查找所有不可用的input元素的个数
//alert( $("input:disabled").size() );

//3)查找所有选中的复选框元素的个数
//alert( $(":checkbox:checked").size() );
 	
//4)查找所有未选中的复选框元素的个数（不适用下拉）
//alert( $(":checkbox:not(:checked)").size() );

//5)查找所有选中的选项元素的个数（适用下拉框）
//alert( $("select option:selected").size() );
alert( $("#provinceid option:not(:selected)").size() );

jquery常用method-api

目的：对web页面（html/jsp/xml）中的任何标签，属性，内容进行增删改查

（1）dom简述与分类

   （a）dom是一种w3c官方标准规则，可访问任何标签语言的页面(html/jsp/xml)
   （b）dom是跨平台(window/linux/unix)，跨语言(javascript/java)，
跨浏览器(ie/firefox/chrome)的标准规则	
   （c）我们只需要按照dom标准规则，针对主流浏览器(ie/firefox/chrome)编程
   （d）js/jquery按照dom的标准规则，既可以操作html/jsp，也能操作css
   （e）dom标准规则不是js的专属，其它语言，也能适用，例如:vbscript，java语言等

（2）dom标准规则下的jquery常用api

注意：以下方法均由jquery对象调用
    each()：是jquery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

	//用json语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
	var namearray = [
		{
			name : "哈哈",
			sal : 6000
		},
		{	
			name : "嘿嘿",
			sal : 7000
		},
		{
			name : "笨笨",
			sal : 8000
		}
	];
	var $namearray = $(namearray);
	$namearray.each(function(){
		//this代表object类型
		alert(this.name + ":"+this.sal);
	});

---

    append()：追加到父元素之后
    prepend()：追加到父元素之前

//div标签插入到ul标签之后(父子关系)
	//$("ul").append( $("p") );	
	
	//div标签插入到ul标签之前(父子关系)
	$("ul").prepend( $("p") );		


after()：追加到兄弟元素之后
    before()：追加到兄弟元素之前 

//div标签插入到ul标签之后(兄弟关系)
	//$("ul").after( $("p") ); 
	 
	//div标签插入到ul标签之前(兄弟关系)
	$("ul").before( $("p") ); 	


attr(name)：获取属性值
    attr(name,value)：给符合条件的标签添加key-value属性对 

//取得form里第一个input元素的type属性
	//alert( $("form input:first").attr("type") );
	//设置form里最后个input元素的为只读文本框
	//$("form input:last").attr("readonly","readonly")
	//$(":password").attr("readonly","readonly")

$("

html代码

")：创建元素，属性，文本 //创建p元素，添加"哈哈"文本，id属性，并添加到文档中 //

哈哈

/*js方式 var pelement = document.createelement("p"); pelement.innerhtml = "哈哈哈"; pelement.setattribute("id","2015"); pelement.id = "2015"; document.body.appendchild(pelement);*/ //jquery方式 var $p = $("

哈哈哈哈哈

"); //$("body").append( $p ); //第一种方式 $(document.body).append( $p ); //第二种方式 remove()：删除自已及其后代节点 //删除id为secondid的li元素 //$("#secondid").remove(); //删除所有li元素 //$("#a li").remove(); //删除ul元素 $("#b").remove(); val()：获取value属性的值 val("")：设置value属性值为""空串，相当于清空 text()：获取html或xml标签之间的值 text("")：设置html或xml标签之间的值为""空串 clone()：只复制样式，不复制行为 clone(true)：既复制样式，又复制行为 //复制原input元素，添加到原input元素后，与其同级 var $old = $(":button"); var $new = $old.clone(); $new.val("新按钮"); $old.after( $new ); //为原input元素动态添加单击事件，且复制原input元素， //var $old = $(":button"); //$old.click(function(){ // alert("动态事件"); //}); //添加到原input元素后，与其同级，且和原按钮有一样的行为 //var $new = $old.clone(true); //$new.val("新按钮"); //$old.after( $new ); replacewith()：替代原来的节点 //双击

中的文本，用文本框替换文本 $("p").dblclick( function(){ var $text = $(""); //文本框替代p标签 $(this).replacewith( $text ); } ); removeattr()：删除已存在的属性 //将元素的align属性删除 $table.removeattr("align"); addclass()：增加已存在的样式 removeclass()：删除已存在的样式 hasclass()：判断标签是否有指定的样式，true表示有样式，false表示无样式 toggleclass()：如果标签有样式就删除，否则增加样式 offset()：获取对象的left和top坐标 offset({top:100,left:200})：将对象直接定位到指定的left和top坐标 width()：获取对象的宽 width(300)：设置对象的宽 height()：获取对象的高 height(500)：设置对象的高 //获取图片的坐标 //var offset = $("img").offset(); //var x = offset.left; //var y = offset.top; //alert(x+":"+y); //设置图片的坐标 //$("img").offset({ // top:100, // left:200 //}); //获取图片的宽高 //var w = $("img").width(); //var h = $("img").height(); //alert(w+":"+h); //设置图片的宽高 $("img").width(500); $("img").height(600); children()：只查询子节点，不含后代节点 next()：下一下兄弟节点 prev()：上一下兄弟节点 siblings()：上下兄弟节点 //取得p元素的直接子元素内容，不含后代元素 //var $span = $("p").children(); //var content = $span.html();//包含子标签 //var content = $span.text();//不包含子标签 //alert(content); //取得p元素的下一个同级的兄弟元素内容 //var $p = $("p").next(); //alert( $p.text() ); //取得p元素的上一个同级的兄弟元素内容 //alert( $("p").prev().text() ); //依次取得p元素的上下一个同级的所有兄弟元素的内容 var $all = $("p").siblings("p"); $all.each(function(){ alert( $(this).html() ); }); show()：显示对象 hide()：隐藏对象 //图片隐蔽 $("img").hide(5000); //休息3秒 window.settimeout(function(){ //图片显示 $("img").show(5000); },3000); fadein()：淡入显示对象 fadeout()：淡出隐藏对象 //淡入显示图片 $("img").fadein(3000); //淡出隐蔽图片 $("img").fadeout(3000); slideup()：向上滑动 slidedown()：向下滑动 slidetoggle()：上下切换滑动，速度快点 //向上下滑动 $(":button").click(function(){ //p标标上下移动 $("p").slidetoggle(100); });

面试题–find(“9类选择器”)：查询指定的节点和多重each()迭代

//使用jquery弹出奇数的tr标签下的td里的值
var $tr = $("table tr:lt(4):even");
$tr.each(function(){
//tr中查找td标签,$(this)表示tr
var $td = $(this).find("td");
$td.each(function(){
	 	//$(this)表示td
	 	var txt = $(this).text();
alert(txt);
});
});

jquery常用event-api

目的：对web页面（html/jsp）进行事件触发，完成特殊效果的处理

window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者

ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
       ready和onload同时存在时，二者都会触发执行，ready快于onload


/*使用jquery方式加载a()和b()二个方法
	$(document).ready(function(){
		a();
	});	
	$(document).ready(function(){
		b();
	});	
	*/

	/*使用jquery最简方式加载a()和b()二个方法
	$(function(){
		a();
	});
	$(function(){
		b();
	});
	*/


change：当内容改变时触发

//当标签触发onchange事件,显示选中的value和innerhtml属性的值
	$("#city").change( function(){ 
		var $option = $("#city option:selected");
		var value = $option.val();
		var text = $option.text();
		alert(value+":"+text);
	} );

focus：焦点获取
select：选中所有的文本值

//加载页面时获取光标并选中所有文字
	$(function(){
		//光标定位文本框
		$(":text").focus();
		//选中文本框的所有文本
		$(":text").select();
	});

keyup/keydown/keypress：演示在ie和firefox中获取event对象的不同

	//当按键弹起时，显示所按键的unicode码
	$(function(){
		//ie浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
		$(document).keyup(function(){
			//获取按钮的unicode编码
			var code = event.keycode; 
			alert(code);
		});
	});

mousemove：在指定区域中不断移动触发

//显示鼠标移动时的x和y座标
	$(function(){
		$(document).mousemove(function(){
			var x = event.clientx;
			var y = event.clienty;
			$("#xid").val(x);
			$("#yid").val(y);
		});		
	});

mouseover：鼠标移入时触发
mouseout：鼠标移出时触发

	//鼠标移到某行上，某行背景变色
	$("table tr").mouseover(function(){
		$(this).css("background-color","inactivecaption");
	});	
	
	//鼠标移出某行，某行还原
	$("table tr").mouseout(function(){
		$(this).css("background-color","white");
	});
	
	//鼠标移到某图片上，为图片加边框
	$("img").mouseover(function(){
		$(this).css("border-color","red");
	});
	
	//鼠标移出图片，图片还原
	$("img").mouseout(function(){
		$(this).css("border-color","white");
	});	

submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台

	//检测是否为中文，true表示是中文，false表示非中文
	function ischinese(str){
		if(/^[\u3220-\ufa29]+$/.test(str)){
			return true;
		}else{
			return false;
		}
	}

click：单击触发
dblclick：双击触发
blur：焦点失去


            
						%3clink%20href%3d%22https%3a%2f%2fcsdnimg.cn%2frelease%2fphoenix%2fmdeditor%2fmarkdown_views-8cccb36679.css%22%20rel%3d%22stylesheet%22%3e