在jquery中,当?(”input[name='metaId']“).val()不能直接获得被选择的radio的|只是获得 radio标签的第一个|q可能jquery使用xpath语言了进行查找有养I而我们通常是想获得被选中的radio的|有以下几U方法:
1Q?(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名
2Q?(”:radio:checked”).val()获得 //限制面只有一lradio标签
??xml version="1.0" encoding="utf-8" standalone="yes"?> 专注于分享Java后端相关技术、老司机实战干货,不限于JVM、ƈ发、设计模式、性能优化、分布式&微服务、云原生、大数据相关主题?/span> <script type="text/javascript"> $("#ddlProvince").empty(); //清空省䆾SELECT控g $.getJSON("/ajax/GetProvinceList", function(data) { } function GetCity() { $("#ddlCity").empty(); //清空城市SELECT控g function GetDistrict() { </script> 例子说明一下: 可?br />
5.^。选择器:[attribute^=value]Q匹配给定的属性是以某些值开始的元素Q下面D个例子来说明一下: 在jquery中,当?(”input[name='metaId']“).val()不能直接获得被选择的radio的|只是获得 radio标签的第一个|q可能jquery使用xpath语言了进行查找有养I而我们通常是想获得被选中的radio的|有以下几U方法: 1Q?(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名 2Q?(”:radio:checked”).val()获得 //限制面只有一lradio标签
Java爱好者社?/strong>
公众号内容简介:
希望x的你停下脚步Q定有所收获?/span>
以前的个人博客内容不好迁U,所以我打算Ҏ自己的多q经验,不断整理输出有h值的内容?br />目前公众号内Ҏ关于SpringCloudQ微服务框架Q、SkywalkingQAPM监控调用链)、JVMQGC分析、内存泄漏分析)、ƈ发编E?/span>相关原创实战文章已出炉?br />
最q刚开始已l有不少伙伴关注了Q期待能有幸搜烦到本博客的同学,可以扫码x一下,不胜感激?br />大家有Q何技术、职场、面试上的问题都可以与我交流?br />
方式一Q?/strong>扫码以下公众号二l码Q?/strong>
方式二:在微信上直接搜烦Q?nbsp;javatech_cbo
感谢各位伙伴的支持Q后l会在该公众号上输出大量的有价值的实战q货 Q期待与你一同进步与成长?br />
]]>
ȝq不错的
$(document).ready(function() {
GetByJquery();
$("#ddlProvince").change(function() { GetCity() });
$("#ddlCity").change(function() { GetDistrict() });
});
function GetByJquery() {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["ProvinceID"])
.text(item["ProvinceName"])
.appendTo($("#ddlProvince"));
});
GetCity();
});
var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["CityID"])
.text(item["CityName"])
.appendTo($("#ddlCity"));
});
GetDistrict();
});
}
$("#ddlDistrict").empty(); //清空市区SELECT控g
var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["DistrictID"])
.text(item["DistrictName"])
.appendTo($("#ddlDistrict"));
});
});
}
]]>
]]>
]]>
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
jQuery 代码:
$("input[name$='letter']")
l果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
2.!。选择器:[attribute!=value]Q匹配所有不含有指定的属性,或者属性不{于特定值的元素Q此选择器等价于:not([attr=value])?
HTML代码
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);
l果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
3.*。选择器:[attribute*=value]Q匹配给定的属性是以包含某些值的元素。D个例子说明一下:
HTML 代码:
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
jQuery 代码:
$("input[name*='man']")
l果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
4.@。匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@W号已经被废除!如果惌兼容最新版本,只需要简单去掉@W号?/span>
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:
$("input[name^='news']")
l果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
]]>
随着jQuery的广泛用,已经出现了大?/span>jQuery插gQ如thickboxQ?/span>iFXQ?/span>jQuery-googleMap{,单的引用q些源文件就可以方便的用这些插件。这里我单的介绍一些网址供大家参考,q些|站头提供了大量?/span>demoQƈ且用及其简单,及时E文不好,也能快速掌握!
http://jquery.com/plugins 官方推荐
http://interface.eyecon.ro/demos 效果,使用更简单,一定有你喜Ƣ的Q?/span>
http://www.dyve.net/jquery/
http://bassistance.de/jquery-plugins
q有其它很多插gQ大家可?/span>google以下Q如果大家发现好的了Q可以留a׃n以下Q?/span>
—————————————————————————————————————————————?br />
xjQuery已经介绍完毕Qƈ合ƈ整理提供l大?/span> 下蝲 Q更多详l的使用请大家参考官方网站,下面我再推荐一?/span>jQuery的学习网站方便大家更好的掌握q项工具Q?/span>
http://keel.sike.googlepages.com/jQuery_getting_started.html 中文入门介绍Q?/span>Keel译
http://jquery.com/api jquery提供全部基本Ҏ的介l及demoQ方便大家查询!
$.ajax({url: "ajax.htm",
success:function(msg){
$(div"#a").html(msg);
}
});
?/span>ajax.htmq回的内容作?/span>id?/span>a?/span>div内容
$.ajax({ url: "ajax.aspx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
?/span>get方式?/span>ajax.aspx面传参敎ͼq将q回内容负给id?/span>a的对象?/span>
$.ajaxTimeout(time) 讄hl束旉
$.ajaxTimeout( 5000 )
其它化方式:
$.get(url, params, callback) ?/span>get方式向远E页面传递参敎ͼh完成后处理函敎ͼ除了url外,其它参数L选择Q?/span>
$.get( "ajax.htm" , function(data){ $("#a").html(data) })
$.get( "ajax.asp",
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
)
$.getIfModified(url, params, callback) ?/span>get方式向远E页面传递参敎ͼ从最后一ơ请求后如果数据有变化才作出响应Q执行函?/span>callback
$.getJSON(url, params, callback) ?/span>get方式向远E?/span>json对象传递参敎ͼh完成后处理函?/span>callback?/span>
$.getScript(url, callback) ?/span>get方式载入q运行一个远E?/span>javascript文g。请求完成后处理函数callback?/span>
$.post(url, params, callback) ?/span>post方式向远E页面传递参敎ͼh完成后处理函?/span>callback
load(url, params, callback) 载入一个远E文件ƈ载入面DOM中,q执行函?/span>callback
$("#a").load("ajax.htm", function() { alert("load is done"); } );
?/span>ajax.htm面发出hQ将q回l果装入id?/span>a的内容中Q然后再执行函数callback?/span>$(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最l效果是当鼠标移?/span>id?/span>a的层上时囑ֱ增加一?/span>red样式Q离开层时Udred样式
toggle(Function, Function) 当匹配元素第一ơ被点击时触发第一个函敎ͼ当第二次被点L触发W二个函?/span>
样式Q?/span><style>.red{color:#FF0000}</style>
Html代码Q?/span> <div id="a">sdf</div>
jQuery代码及效?/span>
$(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最l效果是当鼠标点?/span>id?/span>a的层上时囑ֱ增加一?/span>red样式Q离开层时Udred样式
bind(type, fn) 用户一个事件和触发事g的方式绑定到匚w对象上?/span>
trigger(type) 用户触发type形式的事件?/span>$("p").trigger("click")
q有Q?/span>unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) l定和取消绑定提供函数的h?/span>
例:
$("#a").bind("click",function() {
$(this).addClass("red");
})
也可以这样写Q?/span>
$("#a").click(function() {
$(this).addClass("red");
});
最l效果是当鼠标点?/span>id?/span>a的层上时囑ֱ增加一?/span>red样式Q?/span>
jQuery提供的函?/span>
用于browers事g
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事g
change(fn) select(fn) submit(fn)
用于keyboard事g
keydown(fn) keypress(fn) keyup(fn)
用于mouse事g
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
$(function(){
if($.browser.msie) {
alert("q是一?/span>IE览?/span>");}
else if($.browser.opera) {
alert("q是一?/span>opera览?/span>");}
})
当页面蝲入式判断览器类型,可判断的cd?/span>msie?/span>mozilla?/span>opera?/span>safari
$.each(obj, fn) obj为对象或数组Q?/span>fn为在obj上依ơ执行的函数Q注意区?/span>$().each()
$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
分别?/span>0Q?/span>1Q?/span>2为参敎ͼ传入?/span>function(i)?/span>
$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );
{ name: "John", lang: "JS" }Z?/span>hash对象Q依ơ将hash中每l对象传入到函数?/span>
$.extend(obj, prop) 用第二个对象扩展W一个对?/span>
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
执行?/span>settings对象?/span>{ validate: true, limit: 5, name: "bar" }
可以用下面函数来试
$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})
$.grep(array,fn) 通过函数fn来过?/span>arrayQ将array中的元素依次传给fnQ?/span>fn必须q回一?/span>boolenQ如fnq回trueQ将被过?/span>
$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
我们可以看待执行$.grep后数l?/span>[0,1,2,3,4]变成[0Q?/span>1]
$.merge(first, second) 两个参数都是数组Q排出第二个数组中与W一个相同的Q再两个数l合q?/span>
$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
<p id="a">Hello Again</p><a href="#" onClick=’ ("#a").hide()’>jQuery</a>
当点击连接时,id?/span>a的对象的display变ؓnone?/span>
show()昄匚w对象
hide(speed) 以一定的速度隐藏匚w对象Q其大小Q长宽)和透明度都逐渐变化?/span>0Q?/span>speed?/span>3U?/span>("slow", "normal", "fast")Q也可以是自定义的速度?/span>
show(speed) 以一定的速度昄匚w对象Q其大小Q长宽)和透明度都?/span>0逐渐变化到正?/span>
hide(speed, callback) show(speed, callback)当显C和隐藏变化l束后执行函?/span>callback
toggle() toggle(speed) 如果当前匚w对象隐藏Q则昄他们Q如果当前是昄的,隐藏,toggle(speed),其大(长宽Q和透明度都随之逐渐变化?/span>
<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds) fadeOut(speeds) Ҏ速度调整透明度来昄或隐藏匹配对象,注意有别?/span>hide(speed)?/span>show(speed)Q?/span>fadeIn?/span>fadeOut都只调整透明度,不调整大?/span>
<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
点击q接后可以看到图片逐渐昄?/span>
fadeIn(speed, callback) fadeOut(speed, callback) callback为函敎ͼ先通过调整透明度来昄或隐藏匹配对象,当调整结束后执行callback函数
<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
点击q接后可以看到图片逐渐昄,昄完全后弹出对话框
fadeTo(speed, opacity, callback) 匹配对象以speed速度调整倒透明?/span>opacityQ然后执行函?/span>callback?/span>Opacity为最l显C的透明?/span>(0-1).
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
大家可以看一下自q看效果,如果不用jQueryQ编写原?/span>javascript脚本可能很多代码Q?/span>
slideDown(speeds) 匹配对象的高度?/span>0以指定速率qx的变化到正常Q?/span>
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>
$( function(){
$(document.body).background("black");
})
q行Q当文载入时背景变成黑Ԍ相当?/span>onLoad?/span>
$(obj)
说明Q复制一?/span>jQuery对象Q?/span>
参数Q?/span>obj (jQuery): 要复制的jQuery对象
例子Q?/span>
未执?/span>jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
q行Q当点击id?/span>test的元素时Q弹出对话框文字?/span>twoQ即div标签?/span>p元素的内宏V?/span>
each(fn)
说明Q将函数作用于所有匹配的对象?/span>
参数Q?/span>fn (Function): 需要执行的函数
例子Q?/span>
未执?/span>jQuery前:
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}
q行Q当点击id?/span>test的元素时Q?/span>img标签?/span>src都变成了2.jpg?/span>
eq(pos)
说明Q减匹配对象到一个单独得dom元素
参数Q?/span>pos (Number): 期望限制的烦引,?/span>0 开?/span>
例子Q?/span>
未执?/span>jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("p").eq(1).html())
}
q行Q当点击id?/span>test的元素时Q?/span>alert对话框显C:So is thisQ即W二?/span><p>标签的内?/span>
get() get(num)
说明Q获取匹配元素,get(num)q回匚w元素中的某一个元?/span>
参数Q?/span>get (Number): 期望限制的烦引,?/span>0 开?/span>
例子Q?/span>
未执?/span>jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("p").get(1).innerHTML);
}
q行Q当点击id?/span>test的元素时Q?/span>alert对话框显C:So is thisQ即W二?/span><p>标签的内?/span>
注意get?/span>eq的区别,eqq回的是jQuery对象Q?/span>getq回的是所匚w?/span>dom对象Q所有取$("p").eq(1)对象的内容用jQueryҎhtml()Q而取$("p").get(1)的内容用innerHTML
index(obj)
说明Q返回对象烦?/span>
参数Q?/span>obj (Object): 要查扄对象
例子Q?/span>
未执?/span>jQuery前:
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
q行Q当点击id?/span>test的元素时Q两ơ弹?/span>alert对话框分别显C?/span>0Q?/span>1
size() Length
说明Q当前匹配对象的数量Q两者等?/span>
例子Q?/span>
未执?/span>jQuery前:
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($("img").length);
}
jQuery是一Ƒprototype一样优Ujs开发库c,特别是对css?/span>XPath的支持,使我们写js变得更加方便Q如果你不是?/span>js高手又想写出?/span>U?/span>js效果Q?/span>jQuery可以帮你辑ֈ目的Q?/span>
下蝲地址Q?/span>Starterkit Q?/span>http://jquery.bassistance.de/jquery-starterkit.zipQ?/span>
jQuery Downloads Q?/span>http://jquery.com/src/Q?/span>
下蝲完成后先加蝲到文中Q然后我们来看个单的例子Q?/span>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>
上边的效果是点击文档中所?/span>a标签时将弹出对话框,$("a") 是一?/span>jQuery选择器,$本n表示一?/span>jQueryc,所?/span>$()是构造一?/span>jQuery对象Q?/span>click()是这个对象的ҎQ同?/span>$(document)也是一?/span>jQuery对象Q?/span>ready(fn)?/span>$(document)的方法,表示?/span>document全部下蝲完毕时执行函数?/span>
在进行下面内容之前我q要说明一?/span>$("p")?/span>$("#p")的区?/span>,$("p")表示取所?/span>p标签(<p></p>)的元?/span>,$("#p")表示?/span>id?/span>"p"(<span id="p"></span>)的元?/span>.
我将从以下几个内Ҏ讲解jQuery的?/span>:
1:核心部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效?/span>
6:event事g
7:ajax支持
8:插gE序