(17)查看复选框是否被选中
复选框为:
<input type="checkbox" name="yingmingliu"id="yingmingliu" value="yingmingliu"/>
jq语法为:
$("#yingmingliu").is(':checked')
如果选中,返回true,如果没有被选中,返回false。
查看复选框的值:
$("#yingmingliu").attr('value')
返回value
两个复选框互斥:(选一个另外一个自动失效)
$(document).ready(function() { $("#guluan").focus(function(){$("#meiyinxiang").attr("checked",false);}) }) $(document).ready(function() { $("#meiyinxiang").focus(function(){$("#guluan").attr("checked",false);}) })
效果:
①这是2个复选框按钮(checkbox);
②当其中一个被选择时(成为焦点focus),另外一个被自动设置为未选择;
(18)如何设置某div块A一直在另一div块B的下部
首先:二者都在同一父块下,该父块class为B块的class(不确定是否必要);
如:
<div class="dam"><!--显示区域--> <div id="dam"class="dam"></div> <divid="lastdam" class="lastdam"> </div>
其次,设置css属性
div .dam { float: left; color:red; font-size:20px; text-align:left; width:270; } div .lastdam { float: left; color:blue; font-size:20px; text-align:left; <span style="color:#ff0000;">width:100%;</span> }
关键为红色部分。
然后就可以了。
注意:可能的缺陷是,假如后面那个需要有背景色的话,可能会导致后面的宽度远超之前的(因为lastdam的宽度等于父块的大于dam的宽度)
(19)利用jquery修改css属性(以display演示)
代码:
$("#maincontent_dafengche").css('display','none');
效果:
将ID为maincontent_dafengche的css属性display的值,设置为none
(20)使用jq的name选择器
代码
$("[name='maincontent']").css('display','none');
效果:
选择所有name=" maincontent"的标签
(21)同时选择多个标签,并对其进行操作
代码:
function selectAll() //初始3个复选框被勾选 { var objs =document.getElementsByName('twId'); var i; for(i = 0; i <objs.length; i++) { if(objs[i].type =="checkbox") { objs[i].checked= true; } } }
效果:
①选择所有name="twId"的项;
②如果其类型是复选框(checkbox);那么将其的按钮类型设置为true;(被选择状态);
③说明其是一个数组(变量objs),选择其中一个成员时使用objs[i](i为数字);
④推测其是根据name='twId"的顺序来依次成为数组成员的(但若是通过js或dojo添加的标签,那么不确定其顺序,也许也是根据其在添加后的位置,决定其顺序的?);
(22)确定一个数组的成员个数
假如对象数组名是obj
那么其成员个数是obj.length
(23)利用jquery来ajax异步加载文本
语法:
$(selector).load(URL,data,callback);
代码:
$(document).ready(function() { $("#aa").click(function() { $(".another").load('a.txt'); }) })
html代码:
<divclass="one">测试块</div> <divclass="another">对比块</div> <inputtype="button" id="aa" value="点击启用ajax">
效果
①点击按钮后,读取同目录下的a.txt文件;
②用a.txt文件的内容,替代class="another"的标签的内容;
③假如有多个class="another"的标签,则每个都会被替换;
进阶:加载文件中某一部分
将代码更改为:
$(".another").load('a.txt #a');
效果:
①读取文件中id="a"的标签;
②如文件内容为:
你很帅!! <div id="a">我很帅~~~</div>
则只读取第二行内容;
进阶:回调函数
将代码更改为:
$(".another").load('a.txt',function(responseTxt,statusTxt,xhr) { alert(responseTxt); });
效果:
①函数为回调函数(load后执行的函数);
②第一个参数为返回的文本(全部的文本,即使使用'a.txt #a',显示的依然是全部的,而不是只有一部分),参数名可更改;
②第二个参数为load是否成功的状态。调用成功的话,其statusTxt值为“success”(字符串),失败的话为error。
③第三个是一个对象(object),其中xhr.status表示load的状态,xhr.statusText表示错误的情况是什么。
(24)使用console来记录错误
代码:
console.log(xhr.statusText);
将错误文本记录在日志里(可以利用火狐的开发者工具来显示);
另外还有四种方法:
console.info("这是info");
console.debug("这是debug");
console.warn("这是warn");
console.error("这是error");
具体尚不是很清楚之间的区别,但可以用(至少log和error都能显示)
(25)使用AJAX加载外部html后,使用加载到的按钮触发js事件
情况:
①假设有一外部html,<divid="a"><input type="button" id="bb"value="我很帅~~~"></div>;
②通过ajax加载这部分内容;
③想通过点击加载的id为"bb"的按钮,触发某个js事件;
问题:
①常规写法是不行的,无法触发,根据查询到的资料,似乎是因为加载时便已经确定了。
如以下代码 不可行:
$(document).ready(function()
{
$("#bb").click(function()
{
alert("1");
})
})
解决办法:
①使用on写法,其选择器应为body或者document;
②代码例子:
$("body").on("click","bb", function() { alert("1"); })
即可。其中第一个参数为click(事件),第二个参数为触发该事件的标签(bb),第三个参数是回调函数(触发事件后执行的内容);