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

开发者社区> 零零水> 正文

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

简介: (17)查看复选框是否被选中 复选框为: <input type="checkbox" name="yingmingliu"id="yingmingliu" value="yingmingliu"/> jq语法为: $("#yingmingliu").is(':checked') 如果选中,返回true,如果没有被选中,返回false。   查看复选框
+关注继续查看

(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"的顺序来依次成为数组成员的(但若是通过jsdojo添加的标签,那么不确定其顺序,也许也是根据其在添加后的位置,决定其顺序的?);

 

 

 

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

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
从零开始学 Web 之 JavaScript(一)JavaScript概述
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1917 0
从零开始学 Web 之 JavaScript(三)函数
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1200 0
从零开始学 Web 之 JavaScript(四)数组
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。
1014 0
网页调试:myeclipse修改javascript代码后,执行没有变化呀
SSH做网页,有时候修改了javascript的代码,执行没有生效啊。最后用“IE浏览器自带的调试网页功能"发现还是javascript的问题。 1.查找问题的方法:   1.如果改了配置文件。执行的时候,一定要重启Tomcat服务器。
756 0
html中的div span和frameset框架标签
Div和span 1.      div独占一层,由div九不允许有别的。 2.      span标签不是独自占用一行,span一般用来设置字体。 框架标签: 什么是框架标签,就是把一个页面分成很多块,来分别显示显示不同的页面,下面看一下这个例子就能完全懂了。
660 0
javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQue
原文:javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、j...
2163 0
从零开始学习 webservice第一集,java webservice简单实例入门教程
现在从零开始学习webservice 概念自己百度搜,总之,webservice就相当于一个接口,就像你走进了一家售货店,你不需要知道这家店怎么卖给你东西,你拿着钱去,说我要一包玉溪,人家就会给你返回一包玉溪烟,这就是webservice。
1474 0
Confluence 6 CSS 指南:修改顶部背景
Confluence 默认页面的顶部是有关站点的菜单连接,在这里定义了 快速连接, 浏览菜单,用户菜单和快速查找输入框。在这个示例中,我们将会尝试修改顶部的菜单部分的背景和一些自定义的图片。
820 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载