Jquery 介绍
jQuery 对 js 封装成方法。可以比 JS 实现更多的特效,写更少的代码。 先通过$()得到对象,再调用 jQuery 中定义的方法就可以轻松操作。API 文档中有详细的用 法,一看就会 jquery 对象是数组,直接操作时操作第一个元素
jquery 转成 dom: $("#msg”)[0].innerHTML; $("#msg”).eq(0)[0].innerHTML;
dom 转成 jquery: $(document.getElementById(”msg”))
在哪里写代码
1、在页面中导入 jquery-1.4.1.js,
地方 1:
$(function(){ //在这里写 jquery 代码 1
});
地方 2: $(document).ready(function(){ //防止文档为加载完成就运行
//在这里写 jquery 代码 2 });
事件函数
$(document).ready(function)
当文档完成加载时
$(selector).click(function)
点击事件
$(selector).dblclick(function)
双击事件
$(selector).focus(function)
$("#gl").focus(); var t=$("#gl").val(); $("#gl").val("").focus().val(t);
获得焦点事件
获得焦点,让定界符在内容最 后
$(selector).mouseover(function)
鼠标悬停事件
$(document). blur (function) ,失去焦点 $(document). select (function)选上
$("#test").find('option:selected').text(); 获取下拉框选中 的文 本
$(document).hover(function ); 鼠标移上去
$(document). submit(function)提交
jquery 方法
$(this).hide(1000) 隐藏当前的 HTML 元素。变换时间 1S $("p").show(); 显示元素,变换时间 1S $.trim(" love ");//jquery 去除字符串两端口的空格 $("#select").val("1"); //恢复下拉框默认值 $("#table 的 ID").find("tr").length 获取表格的总行数,查找子元素 $(“#page”).empty();清空 $("p").css("background-color","red"); 改变元素的 css
$("input").eq(0).removeAttr("value");移除 input 标签第一个索引的 value 属性 $(selector).html(“content”) 改变 htm 内容 $("#li"+parentId+" div")[0] 获取下面的一个 div 元素 $("a").appendTo($("#b"));//吧 a 元素剪切到 b 元素里面 $("a").attr('tagName') 获取标签类型 $("#priceUnit").focus(); 非输入框元素。是将页面定位到这个描点 $("#id3>a:first span").html(newname);//获取下面的第一个 a 元素 $("#li"+id).parent() //得到元素的父元素 $(“jquery”).next();//下一个兄弟元素 $(“#jquert”).prev();//上一个兄弟元素 $("a span").toggle() ; //切换元素的可见状态,这个对象也可以是数组哦,全部都反过来 $("#moreinfo").slideToggle();//平滑的从上往下显示出来 $("#li"+id+" a span").html(newname); //嵌套选择的用法 $("a").before(“”),$("a").after:作为兄弟元素添加,之前之后
$("p").unbind( "click" ) 解除事件
$("#reqlist").prepend("
$("p")通过标签获得 $(“.test”)通过 class 属性来获得 $("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景 $("#bt_searchArt").click();让某个按钮被点击 $("p.intro") 选取所有 class="intro" 的
元素。 $("p#demo") 选取 id="demo" 的第一个
元素。
$("p").eq(1) 获取第二个 p 元素
$(“:text”) 选取 input 的的 type=text,其他的也一 $("#msg").addClass("select"); //为元素增加名称为 select 的 class $("#msg").removeClass("select");//删除 class $("#msg").hasClass("select");//判断是否有 class $("#adTable tr:gt(0)").remove();//从表的第二行开始删除 $("p”).trigger(”click”);触发事件
回车和 each 遍历元素、数组、json
回车事件: 方式 1.Input 加上这个回车事件:onkeypress="javascript:if(event.keyCode==13) login();" 方式 2.$("#height").keypress(function(event){//按下回车 enter 键
if(13 == event.keyCode){ $("#bt_searchAlbum").click();
} }); ------------------------------------------------------------------//each 遍历组件的值 callback 可选 callback 的参数也可自选(按顺序)i 下标 n 值 $('li').each(function (i,n){
alert(this.innerHTML); });
//遍历数组 $.each( [0,1,2], function(i, n){
alert(i + ": " + n ); }); //遍历 json $.each( { name: "John", lang: "JS" }, function(i, n){
alert( i + ": " + n ); }); 扫第一个领红包,再扫第二个把刚刚领取的红包用出去。 领到多少我微信发现金给你
AJAX 请求(只有$.ajax 可设置同步加载, 其他都是异步的)
请求 $.getJSON (url,[data],[callback])
描述 使用 HTTP GET 来加载远程 JSON 数据
$.get(url,[data],[callback]) $.post(url,[data],[callback])
使用 HTTP GET 来加载远程数据 使用 HTTP POST 来加载远程数据
$.ajax(options)
把远程数据加载到 XMLHttpRequest 对象中
(url) 被加载的数据的 URL(地址) (data) 发送到服务器的数据的键/值对象 (callback) 当数据被加载时,所执行的函数 (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text) (options) 完整 AJAX 请求的所有键/值对选项
xml html script json jsonp text
Type 可用值 6 种 返回 XML 文档,可用 jQuery 处理。 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。 返回纯文本 JavaScript 代码。不会自动缓存结果。 返回 JSON 数据 JSONP 格式。使用 JSONP 形式调用函数时 返回纯文本字符串
以下是用 jquery 对 ajax 的例子
// $.ajax获取用户状态
$.ajax({ type: "get", async: false,//同步阻塞加载 cache: false,//不缓存 url: "${ctx}/actUser/userStatus.do?actUserId="+actUserId, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) {
if(data.goPage == 1){ window.location.href = "index.jsp?reg=1";
} }, error: function (err) {} }); 返回Json格式
contentType: "application/json; charset=utf-8", dataType: "json",
返回text格式
contentType:"plain/text;utf-8", //备注返回的才是txt dataType:"html"
// getjson获取登录用户状态信息 $.getJSON('actUser/userStatus.do', {actUserId:actUserId}, function(data){ if(data.goPage == 1){ window.location.href = "index.jsp?reg=1"; } });
文本框只能输入数字
方法一:给输入框加入以下属性:
方法2
//选上这以后的单选钮 $("table table").click(function (){
$("input:radio",this).attr("checked",true); });
清除 file 表单的值
var file = $("#fileToUpload") file.after(file.clone().val("")); file.remove();
获得窗口和元素的高度
var obj=$("#addemp")[0]; var ww=$(window).width(); var wh=$(window).height(); var dw=$(obj).width(); var dh=$(obj).height(); //显示在屏幕中央,记得元素要加css:position: fixed; obj.style.top=(wh/2)-(dh/2)+'px'; obj.style.left=(ww/2)-(dw/2)+'px';
拓展 自己写方法
$.fn.background = function(bg){ return this.css('background', bg); };
网上的选择方法大全
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
$("#myELement")
选择 id 值等于 myElement 的元素,id 值不能重复在文
档中只能有一个 id 值是 myElement 所以得到的是唯一的元素
$("div")
选择所有的 div 标签元素,返回 div 元素数组
$(".myClass")
选择使用 myClass 类的 css 的所有元素
$("*")
选择文档中的所有的元素,可以运用多种的
选择方式进行联合选择:例如$("#myELement,div,.myclass")
层叠选择器:
$("form input")
选择所有的 form 元素中的 input 元素
$("#main > *")
选择 id 值为 main 的所有的子元素
$("label + input")
选择所有的 label 元素的下一个 input 元素节点,
经测试选择器返回的是 label 标签后面直接跟一个 input 标签的所有 input 标签
元素
$("#prev ~ div")
同胞选择器,该选择器返回的为 id 为 prev 的
标签元素的所有的属于同一个父元素的 div 标签
基本过滤选择器: $("tr:first") $("tr:last") $("input:not(:checked) + span")
选择所有 tr 元素的第一个 选择所有 tr 元素的最后一个
过滤掉:checked 的选择器的所有的 input 元素
$("tr:even")
选择所有的 tr 元素的第 0,2,
4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从 0 开始)
$("tr:odd") 5... ...个元素 $("td:eq(2)") 个 td 元素 $("td:gt(4)") 元素 $("td:ll(4)") 的 td 元素 $(":header") $("div:animated") 内容过滤选择器:
选择所有的 tr 元素的第 1,3, 选择所有的 td 元素中序号为 2 的那 选择 td 元素中序号大于 4 的所有 td
选择 td 元素中序号小于 4 的所有
$("div:contains('John')") 选择所有 div 中含有 John 文本的元素
$("td:empty")
选择所有的为空(也不包括文本节点)的
td 元素的数组
$("div:has(p)")
选择所有含有 p 标签的 div 元素
$("td:parent")
选择所有的以 td 为父节点的元素数组
可视化过滤选择器:
$("div:hidden") $("div:visible") 属性过滤选择器:
选择所有的被 hidden 的 div 元素 选择所有的可视化的 div 元素
$("div[id]") $("input[name='newsletter']") 'newsletter'的 input 元素
选择所有含有 id 属性的 div 元素 选择所有的 name 属性等于
$("input[name!='newsletter']") 选择所有的 name 属性不等于'newsletter' 的 input 元素
$("input[name^='news']") 开头的 input 元素 $("input[name$='news']") 结尾的 input 元素 $("input[name*='man']") 'news'的 input 元素
选择所有的 name 属性以'news' 选择所有的 name 属性以'news' 选择所有的 name 属性包含
$("input[id][name$='man']")
可以使用多个属性进行联合选择,该选择
器是得到所有的含有 id 属性并且那么属性以 man 结尾的元素
子元素过滤选择器:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 子节点的数组 $("div span:last-child") 一个节点的数组 $("div button:only-child") 节点的所有子节点的数组
返回所有的 div 元素的第一个 返回所有的 div 元素的最后
返回所有的 div 中只有唯一一个子
表单元素选择器:
$(":input") 包括 input, textarea, select 和 button
选择所有的表单输入元素,
$(":text") input 元素 $(":password") $(":radio") 元素 $(":checkbox") $(":submit") $(":image") $(":reset") 元素 $(":button") $(":file") input 元素 $(":hidden") 元素或表单的隐藏域
选择所有的 text
选择所有的 password input 元素 选择所有的 radio input
选择所有的 checkbox input 元素 选择所有的 submit input 元素 选择所有的 image input 元素 选择所有的 reset input
选择所有的 button input 元素 选择所有的 file
选择所有类型为 hidden 的 input
表单元素过滤选择器:
$(":enabled")
选择所有的可操作的表单元素
$(":disabled")
选择所有的不可操作的表单元素
$(":checked")
选择所有的被 checked 的表单元素
$("select option:selected") 选择所有的 select 的子元素中被 selected 的
元素
一、Jquery测试题 下面哪种不是jquery的选择器?(单选) A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器 考点:jquery的选择器(C) 当DOM加载完成后要执行的函数,下面哪个是正确的?(单选) jQuery(expression,[context])B、jQuery(html,[ownerDocument])C、jQuery(callback)D、jQuery(elements) 考点:jquery的核心函数(C) 下面哪一个是用来追加到指定元素的末尾的?(单选) A、insertAfter() B、append() C、appendTo() D、after() 考点:jquery的核心函数(C) 下面哪一个不是jquery对象访问的方法?(单选) A、each(callback) B、size() C、index(subject) D、index() 考点:jquery的核心函数之对象访问(D) jquery访问对象中的size()方法的返回值和jQuery对象的_______属性一样. 考点:jquery的核心函数之对象访问(length) jquery中$(this).get(0)的写法和__________是等价的。 考点:jquery的核心函数之对象访问($(this)[0]) 7.有这样一个表单元素 ,想要找到这个hidden元素,下面哪个是正确的?(单选) A、visible B、hidden C、visible() D、hidden() 考点:jquery的选择器(B) 如果需要匹配包含文本的元素,用下面哪种来实现?(单选) A、text() B、contains() C、input() D、attr(name) 考点:jquery的选择器(B) 现有一个表格,如果想要匹配所有行数为偶数的,用________实现,奇数的用_______实现。 考点:jquery的选择器(even,odd) 如果想要找到一个表格的指定行数的元素,用下面哪个方法可以快速找到指定元素?(单选) A、text() B、get() C、eq() D、contents() 考点:jquery的选择器(C) 在一个表单里,想要找到指定元素的第一个元素用_________实现,那么第二个元素用_________实现。考点:jquery的选择器(first,eq(1))
J q u e r y测试题
1、HTML 代码: one
p class="myClass" span
p class="notMyClass" jQuery 代码: $("div,span,p.myClass") 结果:( A ) A、[
p class="myClass" , span ] B、[
p class="myClass" ] C、[
p class="notMyClass" ] D、[