从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)

(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),第三个参数是回调函数(触发事件后执行的内容);

 

 

时间: 2024-10-04 17:49:44

从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)的相关文章

从零开始学_JavaScript_系列(二)——弹框及读取、条件判断、事件处理、注释、图片、超链和div

(11)导入js文件的潜在问题 假如有一个 <script src="111.js"> js脚本1 </script> 那么,由于导入了111.js的原因,"js脚本1"事实上是不会被执行的. 准确的说,包含导入js脚本功能的script标签,里面的脚本都不会执行(不能保证全部,但目前学到的都不会被执行,如果有可以执行的,其后会在这里修改说明).   (12)补充说明适应人群 至少要有一点的编程概念,毫无编程概念的话,恐怕是有一些难度的. 由

jquery复选框全选/取消示例

 jquery复选框全选/取消示例,实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态  功能:   a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态   b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 代码如下: /**  * 全选函数  * @param mainId 主复选框id  * @param klass 下属复选框的class  */ function selectAll(mainId,klass){  $(

从零开始学_JavaScript_系列(12)——jquery&amp;lt;2&amp;gt;(高度自适应,哈希地址及检测,单页面技术)

前注:我在练习的时候,函数命名比较随意,以修改起来简单的简短无意义函数名为主,实际使用时,请使用更易阅读.规范的命名方式 (ps:这篇算是上周的) (26)让某块随着浏览器的高度变化而自动变化 假设该块的标签名为section 于是: function ge() { var m =document.documentElement.clientHeight; $("section").css("height",m-100); } window.onresize = f

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo.(当然,本篇也考虑了未使用过dojo的人,可以只阅读该链接关于dojo下载的部分,以获得dojo) 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (34)gridx gridx系列插件并

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): re

从零开始学_JavaScript_系列(14)——dojo(7)(饼图,BorderContainer,hashchange,弹窗)

5/5更新.BorderContainer自适应在本地时正常使用的方法,请查看原文代码之前那一段话 (60)创建一个饼形图 比较简单的标签声明法:(只需要修改数据即可) ①首先,加载dojo文件和样式文件:(关于style.css,需要根据自己找到的路径修改,或者使用我从官网上找到的链接:https://dojotoolkit.org/documentation/tutorials/1.10/charting/demo/style.css) <link rel="stylesheet&qu

jquery 复选框全选 反选

$("#checkall").click( function(){ if(this.checked){ $("input[name='checkname']").each(function(){this.checked=true;}); }else{ $("input[name='checkname']").each(function(){this.checked=false;}); } } ); 看个jquery全选实例   <scrip

工作小计:关于jquery复选框的ckeckbox的值改变

业务需求,需要再前端页面增加复选框,jsp页面,使用的是jquery代码如下,发现实际效果只有第一次可以生效,后面点击全选没有效果 /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]").attr("checked&qu

jquery复选框全选/取消示例_jquery

功能: a:实现点击复选框的时候全选所有的子复选框,再点击取消所有复选框的选中状态 b:有一个子复选框选中则父复选框选中 所有子复选框都不选中则父复选框不选中 复制代码 代码如下: /** * 全选函数 * @param mainId 主复选框id * @param klass 下属复选框的class */function selectAll(mainId,klass){ $("." + klass).each(function(){     if($("#" +