标签：
jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库。
（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....
语法：$(js对象)---->jQuery对象
例如：$(divElement)---->$div
（A）通过ID属性：$("#id属性值")
（B）通过标签名：$("标签名")
（C）通过CLASS属性：$(".样式名")
基本选择器
//查找id的元素个数 alert($("#div1ID").size()); //查找div元素个数 alert($("div").length); //查找class元素个数 alert($(".myClass").size()); //查找div，span，p的个数 alert($("div,span,p").size()); //查找所有id，class，p的元素个数 alert($("#div1ID,.myClass,p").size());
层次选择器
//找到form里面的input alert($("form input").size()); //找到form里所有子级input元素 alert($("form>input").size()); 找到form同级的第一个input的值 //alert($("form+input").val()); alert($("form+input").size()); //找到form同级的input元素个数，从form往后找 alert($("form~input").length);
基本加强型选择器
//得到第一个li alert($("ul li:first").text()); //得到最后一个li alert($("ul li:last").text()); //得到第3个li，从0开始计数 alert($("ul li:eq(2)").text()); //得到偶数的tr alert($("table tr:even").text()); //得到奇数的tr alert($("table tr:odd").text()); //查找表格中索引号大于0的tr alert($("table tr:gt(0)").size()); //查找表格中索引号小于4的tr alert($("table tr:lt(4)").size()); //给h1\h2\h3标签加上红色背景，蓝色文字，header只用于h1、h2、h3 $(":header").css("background-color","red").css("color","blue"); //查找未选中的input为checkbox的元素个数 alert($(":checkbox:not(:checked)").size());
内容选择器
//查找所有包含文本"John"的div元素的个数 alert($("div:contains(‘John‘)").size()); //查找所有p元素为空的元素个数，不包含<p/>元素 alert($("p:empty").size()); //给所有包含p元素的div元素添加一个myClass样式 $("div:has(p)").addClass("myClass"); //查找所有含有子元素或者文本的p元素个数,即p为父元素，包含<p/>元素 alert($("p:parent").size());
可见性选择器
//1)查找隐藏的tr元素的个数 alert($("table tr:hidden").size()); //2)查找所有可见的tr元素的个数 alert($("table tr:visible").size());
属性选择器
//查找所有含有id属性的div元素个数 alert($("div[id]").size()); //查找所有name属性是newsletter的input元素，并将其选中 $("input[name=‘newsletter‘]").attr("checked","checked"); //查找所有name属性不是newsletter的input元素，并将其选中 $("input[name!=‘newsletter‘]").attr("checked","checked"); //查找所有name属性以‘news‘开头的input元素，并将其选中 $("input[name^=‘news‘]").attr("checked","checked"); //查找所有name属性以‘letter‘结尾的input元素，并将其选中 $("input[name$=‘letter‘]").attr("checked","checked"); //查找所有name属性包含‘news‘的input元素，并将其选中 $("input[name*=‘news‘]").attr("checked","checked"); //找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中 $("input[id][name$=‘letter‘]").attr("checked","checked");
子元素选择器
//迭代[each]每个ul中第1个li元素中的内容,索引从1开始 $("ul li:first-child").each(function () { //alert(this.text());传统js对象不能调用text alert($(this).text()); }) //迭代每个ul中最后1个li元素中的内容,索引从1开始 $("ul li:last-child").each(function () { //alert(this.text());传统对象不能调用text alert($(this).text()); }) //迭代每个ul中第2个li元素中的内容,索引从1开始 $("ul li:nth-child(2)").each(function () { alert($(this).text()); }) //在ul中查找是唯一子元素的li元素的内容 $("ul li:only-child").each(function () { alert($(this).text()); })
表单选择器
//查找所有input元素的个数 //alert( $("input").size() );//10，找input标签 alert( $(":input").size() );//13，找input标签和select/textarea/button //查找所有文本框的个数 alert( $(":text").size() ); //查找所有密码框的个数 alert( $(":password").size() ); //查找所有单选按钮的个数 alert( $(":radio").size() ); //查找所有复选框的个数 alert( $(":checkbox").size() ); //查找所有提交按钮的个数，包括<button>标签 alert( $(":submit").size() ); //匹配所有图像域的个数 alert( $(":image").size() ); //查找所有重置按钮的个数 alert( $(":reset").size() ); //查找所有普通按钮的个数，包括input的type=button alert( $(":button").size() ); //查找所有文件域的个数 alert( $(":file").size() ); //查找所有input元素为隐藏域的个数 alert( $(":input:hidden").size() );
表单对象属性选择器
//查找所有可用的input元素的个数 alert($("input:enabled").size()); //查找所有不可用的input元素的个数 alert( $("input:disabled").size() ); //查找所有选中的复选框元素的个数 alert( $(":checkbox:checked").size() ); //查找所有未选中的复选框元素的个数 alert( $(":checkbox:NOT(:checked)").size() ); //查找所有选中的选项元素的个数 alert( $("select option:selected").size() ); //查找id为provinceID的select的未选中的选项个数 alert( $("#provinceID option:NOT(:selected)").size() );
DOM标准规则下的jQuery常用API
//DIV标签插入到UL标签之后(父子关系) $("ul").append($("div")); //DIV标签插入到UL标签之前(父子关系) $("ul").prepend($("div")); //DIV标签插入到UL标签之后(兄弟关系) $("ul").after($("div")); //DIV标签插入到UL标签之前(兄弟关系) $("ul").before($("div")); //取得form里第一个input元素的type属性 //<input type="text" name="username" value="张三"/> alert($("form input:first").attr("type")); //设置form里最后一个input元素的为只读文本框 $("form input:last").attr("readonly","true"); //创建div元素，添加"哈哈"文本，ID属性，并添加到文档中 /*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); //删除ID为secondID的LI元素 $("#secondID").remove(); //删除第一个ul中的所有LI元素 $("#a li").remove(); //删除第二个UL元素 $("#b").remove(); //复制原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 $old = $(":button"); var $new = $old.clone(true);//复制行为和样式 $new.val("新按钮"); $old.after($new); //双击<div>中的文本，用文本框替换文本 $("div").dblclick( function(){ var $text = $("<input type=‘text‘ style=‘width:165px;height:23px‘/>"); //文本框替代div标签 $(this).replaceWith( $text ); } ); //为<table>元素添加属性border/align/width $("table").attr("border","2").attr("align","right").attr("width","60%"); //将<table>元素的align属性删除 $("table").removeAttr("align");
添加样式
//为无样式的DIV添加样式 $("div:first").addClass("myClass"); //为有样式的DIV删除样式 $("div:last").removeClass("myClass"); //切换样式，即有样式的变成无样式，无样式的变成有样式 $("div").toggleClass("myClass"); //最后一个DIV是否有样式 var flag = $("div:last").hasClass("myClass"); alert(flag?"有样式":"无样式"); //获取图片的坐标 var offset = $("img").offset(); var x = offset.left; var y = offset.top; alert(x); alert(y); //设置图片的坐标 $("img").offset({ top:100, left:200 }); //获取图片的宽高 var w = $("img").width(); var h = $("img").height(); alert(w+":"+h); //设置图片的宽高 $("img").width(500); $("img").height(600); //取得div元素的直接子元素内容，不含后代元素 //<div> // <span> // Hello Again // <b> // Bold // </b> // </span> //</div> alert($("div").children().text());//Hello Again Bold //取得div元素的下一个同级的兄弟元素内容 alert($("div").next().text()); //取得div元素的上一个同级的兄弟元素内容 alert($("div").prev().text()); //依次取得div元素同级的所有兄弟中p元素的内容 $("div").siblings("p").each(function(){ alert($(this).text()); });
动画
//图片隐蔽 $("img").hide(5000,function(){ alert("隐藏完毕"); }); //休息3秒 window.setTimeout(function(){ $("img").show(5000); },3000); //淡出隐蔽图片 $("img").fadeOut(3000); //淡入显示图片 $("img").fadeIn(3000); $(":button").click(function(){ //div标标上下移动 $("div").slideToggle(100); });
/*使用JS方式加载a()和b()二个方法，后面的覆盖前面的*/ window.onload = function(){ a(); } window.onload = function(){ b(); } /*使用jQuery最简方式加载a()和b()二个方法，不会覆盖两个都会执行*/ $(function(){ a(); }); $(function(){ b(); }); //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值 $("#city").change( function(){ var $option = $("#city option:selected"); var value = $option.val(); var text = $option.text(); alert(value+":"+text); } ); //加载页面时获取光标并选中所有文字 $(function(){ //定位光标 $(":text").focus(); //选中字体 $(":text").select(); }) //当按键弹起时，显示所按键的unicode码 $(function(){ //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象 $(document).keyup(function(){ //获取按钮的unicode编码 var code = event.keyCode; alert(code); }); }); //显示鼠标移动时的X和Y座标 $(function(){ $(document).mousemove(function(){ var x = event.clientX; var y = event.clientY; $("#xID").val(x); $("#yID").val(y); }); }); //鼠标移到某行上，某行背景变色 $("table tr").mouseover(function(){ $(this).css("background-color","activecaption"); }); //鼠标移出某行，某行还原 $("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"); }); <script type="text/javascript"> //浏览器加载web页面时触发 $(function(){ $("form :text").focus(); }) </script> <script type="text/javascript"> //检测是否为中文，true表示是中文，false表示非中文 function isChinese(str){ var reg = /^[\u4E01-\uFA29]+$/i; if(reg.test(str)) { return true; } return false; } </script> <script type="text/javascript"> //当表单提交前检测 $("form").submit(function(){ var flag = false; //获取文本框中内容 var inputText = $("form :text").val(); //去空格 inputText = $.trim(inputText); //判断是否有内容 if(inputText.length >0){ //如果有英文 if(isChinese(inputText)) { flag = true; $("form :text").val(""); } else { alert("用户名必须为中文") } } else { alert("必须填写用户名") } return flag; }) </script> //浏览器加载页面时，文本框样式改变 $(function(){ $("table :text").addClass("myClass"); }); //光标移上去时，清空文本框内容 $("table :text").focus( function(){ $(this).val(""); $(this).removeClass("myClass"); } ); //当文本框失去焦点时，恢复原来的样式 $("table :text").blur(function(){ var content = $(this).val(); if($.trim(content).length == 0) { $(this).val("输入用户名"); $(this).addClass("myClass"); } })
简单获取时间，jquery对象调用load，直接将返回的数据插入到jquery对象里面。
function getMsg(){ var url = "${pageContext.request.contextPath}/ajax_time?time="+new Date().getTime(); // 参数一：url // 参数二：以post方式发送的JSON格式数据 // 参数三：回调函数 $("#timeSpan").load(url,null,function(backData,textStatus,ajax){ //回调函数的三个参数 //返回的数据，它是js对象，它是一个对象 alert(backData); //返回状态的文本描述，例如success，error alert(textStatus); //ajax对象 alert(ajax.responseText);//是一个字符串 }); }
验证用户是否存在，使用$.post方法。
function checkEmp(input){ var empName=$(input).val(); //去掉空格 empName = $.trim(empName); if(empName.length == 0) return; var url="${pageContext.request.contextPath}/emp_checkEmp?time="+new Date().getTime(); //手动写json对象 var sendData = { empName:empName }; //jquery自动生成json对象 //var sendData = $("form").serialize(); alert(sendData); $.post(url,sendData, function (backData) { //创建img标签 var $img = $("<img src=‘"+backData+"‘ height=‘14px‘ width=‘14px‘/>"); //清空span，然后添加图片 $("span").text(""); $("span").append($img); }) }
二级联动：
function getCity(province){ var index = province.selectedIndex; if(index == 0) return; var $province = $(province[index]).text(); var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime(); var sendData = { province:$province } $.post(url,sendData,function(xml){ //清空city下拉菜单 $("#cityID option:gt(0)").remove(); //xml是js对象 var $xml = $(xml).find("city"); $xml.each(function(){ //text可以访问xml标签 var option = $("<option>"+$(this).text()+"</option>"); //添加到下拉菜单 $("#cityID").append(option); }); }) }
$.ajax方式
function getCity(province){ var index = province.selectedIndex; if(index == 0) return; var $province = $(province[index]).text(); var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime(); var sendData = { province:$province } $.ajax({ type:"POST", url:url, data:sendData, success:function(xml){ //清空city下拉菜单 $("#cityID option:gt(0)").remove(); //xml是js对象 var $xml = $(xml).find("city"); $xml.each(function(){ //text可以访问xml标签 var option = $("<option>"+$(this).text()+"</option>"); //添加到下拉菜单 $("#cityID").append(option); }); }}); }
标签：
原文地址：http://www.cnblogs.com/juaner767/p/5616968.html
