可见性选择器
//1)查找隐藏的tr元素的个数
//alert( $("table tr:hidden").size() );
//2)查找所有可见的tr元素的个数
//alert( $("table tr:NOT(:hidden)").size() );
alert( $("table tr:visible").size() );//提倡 、
属性选择器
//1)查找所有含有id属性的div元素个数
//alert( $('div[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( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
//DIV标签插入到UL标签之后(兄弟关系)
//$("ul").after( $("div") );
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") );
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")
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
//<body><div id="2015">哈哈</div></body>
/*js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$("body").append( $div ); //第一种方式
$(document.body).append( $div ); //第二种方式
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()：替代原来的节点
//双击<div>中的文本，用文本框替换文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );
removeAttr()：删除已存在的属性
//将<table>元素的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()：上下兄弟节点
//取得div元素的直接子元素内容，不含后代元素
//var $span = $("div").children();
//var content = $span.html();//包含子标签
//var content = $span.text();//不包含子标签
//alert(content);
//取得div元素的下一个同级的兄弟元素内容
//var $p = $("div").next();
//alert( $p.text() );
//取得div元素的上一个同级的兄弟元素内容
//alert( $("div").prev().text() );
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").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(){
//div标标上下移动
$("div").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：当内容改变时触发
//当<select>标签触发onchange事件,显示选中<option>的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：焦点失去
本文来自博客园，作者：NE_STOP，转载请注明原文链接：https://www.cnblogs.com/alineverstop/p/18004638
