jQuery
来源：互联网 发布：java泛型有什么用 编辑：程序博客网 时间：2024/06/14 17:48
一、基础选择器：
$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素，也可能是函数。$()方法是jQuery()简写。- $("div").html("Hello iMooc!”); //元素选择器
- $("#my_id”) $(".red”) //id class
$("button").attr("disabled","no”); //attr()方法的功能是设置或获取元素的某项属性值。- $("*”) $(“div *”) //所有元素
- $(".red,.green”) //选多个元素
- $("div label”) //层次选择器
- $("div > label”) //子层次选择器
- $(“prev + next”) $("p+label") //查找与“prev”元素紧邻的下一个“next”元素
- $(“prev ~ siblings”) $("p~label")
//prev ~ siblings获取prev 元素后面全部相邻的元素 - $(“li:first”)//一组相同标签元素中的第1个元素
- $("li:last”) //给最后的li标签文字添加红色。
- $("li:eq(3)”) //从0开始
- li:contains('土豪’) $("li:contains('jQuery')")//按照文本内容来查找一个或多个元素
- $("li:has('label')”) //包含的元素名称来过滤
- $("p:hidden") $("input:hidden") //
:hidden过滤选择器的功能是获取全部不可见的元素 $("li:visible”) //:visible过滤选择器获取的是全部可见的元素- $("li[title='蔬菜']”) //属性选择器
- $("li[title*='果']”) //包含的所有
- $("li:first-child”) //首个子元素
- :last-child //末个子元素
实例：
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li hidden>6</li> <li hidden>7</li> <li hidden>8</li> <a href="javascript:;">更多</a> </ul> <script type="text/javascript"> $("a").click(function(){ if($("a").text() === "更多"){ $("a").text("简化"); $("li:hidden").css("display","list-item"); }else{ $("a").text("更多"); $("li:eq(6)").css("display","none"); $("li:eq(7)").css("display","none"); $("li:eq(5)").css("display","none"); } }); </script> </body>或者：$("li[class=no]").show(); $("li[class=no]").hide();
二、表单选择器：
:input表单选择器获取表单元素,不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素 $(“#frmTest :input")- $("#frmTest :text”) //文本输入框
- $("#frmTest :password").addClass("bg_red");
- $("#frmTest :radio").attr("disabled”,true); //单选 disable 1.布尔“disabled” 2removeAttr 3“"
- $("#frmTest :checkbox").attr("disabled",false); //复选框
- $("#frmTest input:submit").addClass("bg_red"); //提交按钮 注意筛选表单的按钮
- $("#frmTest :image").addClass("bg_red”); //图像
- $("#frmTest :button").addClass("bg_blue”); 按钮
- $("#frmTest :checked").attr("disabled", true);// true,false没有双引号,表示布尔类型
- $("#frmTest :selected").text(); //下拉列表选中状态的
三、操作DOM元素
- $("#a1").attr("href" , "www.imooc.com”); var $url = $("#a1").attr("href"); //
attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。 - var $content = "<b>唉，我又变胖了！</b>";$("#html").html($content); $("#text").text($content);//使用
html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。 - $("#content").css({"background-color":"red","color":"white"});//通过
addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。 - $("#content").removeClass("white blue");//使用
removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名 - $("body").append(rethtml());//
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。 - $(content).appendTo(selector),参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。 var $html = "<span class='red'>小青蛙</span>" $($html).appendTo("div");
$(selector).before(content)和$(selector).after(content)//使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容 var $html = "<span class='red'>兄弟。</span>" $(".green").after($html);- $("body").append($(".red").clone()); //调用
clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性 $(selector).replaceWith(content)和$(content).replaceAll(selector)//replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同 $($html).replaceAll(".green");$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)//wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容 $(".red").wrapInner("<i></i>");- $(selector).each(function(index))//使用
each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始，如：
$("span").each(function (index) {if (index == 1) {$(this).attr("class", "red");
}});
remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。empty()可以理解为删除了本身内容
四、jQuery 事件与应用
$(document).ready(function(){})等价于$(function(){});//ready()只要页面的DOM结构加载后便触发$(selector).bind(event,[data] function),
bind()方法绑定元素的事件非常方便$(function () {
$("#btntest").bind("click mouseout", function () {
$(this).attr("disabled", "true");
})
});
$(selector).hover(over，out);//over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。
$(selector).toggle(fun1(),fun2(),funN(),…);//click事件中绑定多个函数$("#btntest").bind("click", function () { $("div").toggle({ function(){ $(this).hide(); },function(){ $(this).show(); } }); });$("div").unbind("click dblclick");//
unbind()方法可以移除元素已绑定的事件$(selector).one(event,[data],fun)
//one()方法可以绑定元素任何有效的事件，但这种方法绑定的事件只会触发一次$(selector).trigger(event) //
trigger()方法可以直接手动触发元素指定的事件 $("div").trigger("change-color");文本框的focus和blur事件,获得和失去焦点时触发
$("input") .bind("focus", function () { $("div").html("请输入您的姓名！"); }); $("input").bind("blur", function () { if ($(this).val().length == 0) $("div").html("你的名称不能为空！"); }); });下拉列表框的change事件
$(selector).live(event,[data],fun) //与bind()功能相同，live()方法还可以绑定动态元素$(function () { $("#btntest").live("click mouseout", function () { $(this).attr("disabled", "false"); }); $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />"); });五、动画特效:
$(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) //参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。$(selector).live(event,[data],fun) //与bind()功能相同，live()方法还可以绑定动态元素$(function () { $("#btntest").live("click mouseout", function () { $(this).attr("disabled", "false"); }); $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />"); });<body> <h3>toggle()方法的动画切换效果</h3> <div> <h4> <span class="fl">我喜欢吃的水果</span> <span class="fr" id="spnTip">显示</span> </h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> </div> <script type="text/javascript"> $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").toggle("slow",function(){ $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏"); }); }); }); </script> </body>$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback]) //滑动效果slideToggle()方法可以切换slideUp()和slideDown()<body> <h3>使用slideToggle()方法切换滑动效果</h3> <div> <h4> <span class="fl">我喜欢吃的水果</span> <span class="fr" id="spnTip">向下滑</span></h4> <ul> <li>苹果</li> <li>甘桔</li> <li>梨</li> </ul> <input id="hidval" type="hidden" value="0"/> </div> <script type="text/javascript"> $(function () { var $spn = $("#spnTip"); $("h4").bind("click", function () { $("ul").slideToggle("slow",function() { $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑"); }); }) }); </script> </body>$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback]) //淡入淡出 $(selector).fadeTo(speed,opacity,[callback])//调用
fadeTo()方法，可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,其中speed参数为效果的速度，opacity参数为指定的不透明值，它的取值范围是0.0~1.0，可选项参数callback为效果完成后，回调的函数名 $(this).fadeTo("slow",0.2);$(selector).animate({params},speed,[callback]) //自定义动画效果,其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。
$("span").animate({ width: "80px", height: "80px" }, 3000, function () { $("#tip").html("执行完成!"); });调用
animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。$("span").animate({ left: "+=100px" }, 3000, function () { $(this).animate({ height: '+=30px', width: '+=30px' }, 3000, function () { $("#tip").html("执行完成!"); }); });$(selector).stop([clearQueue],[goToEnd])
//stop()方法的功能是在动画完成之前，停止当前正在执行的动画效果，这些效果包括滑动、淡入淡出和自定义的动画,其中，两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，后者表示是否完成正在执行的动画，默认为false$(selector).delay(duration) //延迟
六、实现Ajax应用
load(url,[data],[callback]) //使用
load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。$("ul") .html("<img src='Images/Loading.gif' alt=''/>") .load("http://www.imooc.com/data/fruit_part.html",function(){ $this.attr("disabled", true); });jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) //使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数组，并对获取的数据进行解析，显示在页面中,url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数.$(function () { $("#btnShow").bind("click", function () { var $this = $(this); $.getJSON("http://www.imooc.com/data/sport.json",function(data){ $this.attr("disabled", "true"); $.each( data,function (index, sport) { if(index==3) $("ul").append("<li>" + sport["name"] + "</li>"); }); }); }) });jQuery.getScript(url,[callback])或$.getScript(url,[callback]) //使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件 //向服务器发送get\post请求
$.get(url,[callback])$.get("http://www.imooc.com/data/info_f.php",function(data) { $this.attr("disabled", "true"); $("ul").append("<li>我的名字叫：" + data.name + "</li>"); $("ul").append("<li>男朋友对我说：" + data.say + "</li>"); }, "json");$.post(url,[data],[callback])$.post("http://www.imooc.com/data/check_f.php",{ num:$("#txtNumber").val() }, function (data) { $("ul").append("<li>你输入的<b> " + $("#txtNumber").val() + " </b>是<b> " + data + " </b></li>"); });$(selector).serialize() //使用
serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求 $("#litest").html($("form").serialize());jQuery.ajax([settings])或$.ajax([settings]) //使用ajax()方法是最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请求并传递数值, (其中参数settings为发送ajax请求时的配置对象，在该对象中，url表示服务器请求的路径，data为请求时传递的数据，dataType为服务器返回的数据类型，success为请求成功的执行的回调函数，type为发送数据请求的方式，默认为get)$.ajax({
url:"http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type:"post",
success: function (data) {
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
jQuery.ajaxSetup([options])或$.ajaxSetup([options]) //使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值$(function () {
$.ajaxSetup({
type:"post",
success:function(data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
$(selector).ajaxStart(function())和$(selector).ajaxStop(function()) //ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。 (两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数)七、jQuery插件
$(form).validate({options}) //其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
email:{
required:true,
email:true
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
$(form). ajaxForm ({options}) //通过表单form插件，调用
ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$(form).ajaxForm(options);
});
$(linkimage).lightBox({options}) //该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片 其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象
$(function () {
$('.divPics a').lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
$(linkimage).jqzoom({options}) //在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的
jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果$(function () {
$("#jqzoom").jqzoom({ //绑定图片放大插件jqzoom
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
保存：
$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)//使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
<script src="http://www.imooc.com/data/jquery.cookie.js" type="text/javascript"></script>
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email",$("#email").val(), {
path: "/", expires: 7
})
}
else {
$.cookie("email",null, {
path: "/"
})
}
});
});
$(textbox).autocomplete(urlData,[options]); //搜索插件的功能是通过插件的
autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择 ,其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
}
八、jQuery 工具类函数
$(function () {
var strTmp = "您的浏览器名称是：";
if ($.browser.chrome) { //谷歌浏览器
strTmp += "Chrome";
}
if ($.browser.mozilla) { //火狐相关浏览器
strTmp += "Mozilla FireFox";
}
strTmp += "<br /><br /> 版本号是：" //获取版本号
+$.browser.version;
$(".content").html(strTmp);
});
$.support.boxModel 显示当前浏览器是否属于标准的w3c盒子模型 w3c盒子模型不包含，IE盒子模型则包含，Width和Height这两个属性值中是否包含padding和border的值 <!DOCTYPE html>
$.isEmptyObject(obj); //检测对象是否为空
$.isPlainObject (obj); //检测对象是否为通过
{}或new Object()关键字创建的原始对象$.contains (container, contained); //调用名为
$.contains的工具函数，能检测在一个DOM节点中是否包含另外一个DOM节点，如果包含，返回true，否则，返回false值 参数container表示一个DOM对象节点元素，用于包含其他节点的容器，contained是另一个DOM对象节点元素，用于被其他容器所包含$.contains(node_a,node_b)
$.trim (str); 调用名为
$.trim的工具函数，能删除字符串中左右两边的空格符，但该函数不能删除字符串中间的空格 var strNew = $.trim(strOld);$. param (obj); //调用名为
$. param的工具函数，能使对象或数组按照key/value格式进行序列化编码，该编码后的值常用于向服务端发送URL请求,参数obj表示需要进行序列化的对象，该对象也可以是一个数组，整个函数返回一个经过序列化编码后的字符串 var objNewInfo =$.param(objInfo);(p.s:param和serialize的区别是什么？前者是对任意的参数进行URL地址格式的转换)
$. extend ({options}); //调用名为
$. extend的工具函数，可以对原有的工具函数进行扩展，自定义类级别的jQuery插件(function ($) {
$.extend({
"MinNum": function (p1, p2) {
return (p1 > p2) ? p2 : p1;
}
});
})(jQuery);
$(function () {
$("#btnShow").bind("click", function () {
$(".tip").html("");
var strTmp = "17与18中最小的数是：";
strTmp +=$.MinNum (17, 18);
//显示在页面中
$(".tip").show().append(strTmp);
});
});
$. extend (obj1,obj2,…objN); //除使用
$.extend扩展工具函数外，还可以扩展原有的Object对象，在扩展对象时，两个对象将进行合并，当存在相同属性名时，后者将覆盖前者,参数obj1至objN表示需要合并的各个原有对象var objNewInfo =$.extend(objInfo,objMess);
//通过焦点改变背景颜色
(function($){
$.extend({
"overChangeColor":function(linli){
linli.css("background-color","#aaa");
},
"outChangeColor":function(linli){
linli.css("background-color","#fff");
}
})
})(jQuery);
$(function () {
$("li").bind("mouseout",function(){
$.outChangeColor($(this));
});
$("li").bind("mouseover",function(){
$.overChangeColor($(this));
})
});
0 0
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQuery
- JQUERY
- jquery
- jQuery
- jquery
- jquery
- C++中的指针和引用
- java-线程并发-缓冲器-模拟
- Android 4.4 Launcher3——导入eclipse进行调试
- Caffe代码导读（0）：路线图
- 微软的系统管理服务器SMS
- jQuery
- react组件生命周期过程
- vps设置的一些碎碎念
- Spring框架下的管理员修改密码功能实现
- 手机安全卫士------主页面（HomeActivity）
- Postfix邮件服务器搭建（三）
- 侧边导航栏自动获取文章的高度
- org.springframework.beans.factory.BeanCreationException异常产生的原因和解决方案
- Postfix邮件服务器搭建（四）
