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

 

 

目录
相关文章
|
7月前
|
JavaScript 前端开发
JavaScript实现复选框全选与全不选的效果
JavaScript实现复选框全选与全不选的效果
|
7月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
202 1
|
7月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
117 0
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
43 3
|
2月前
|
JavaScript 前端开发
Javascript:获取、设置复选框的勾选状态
Javascript:获取、设置复选框的勾选状态
49 1
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
16 0
|
3月前
|
XML JavaScript 前端开发
jQuery获取所有标签
【9月更文挑战第2天】
|
4月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
89 4
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
39 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
39 0