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

 

 

目录
相关文章
|
1月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
9 0
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
18天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
23天前
|
JavaScript
用JQuery实现选中select里面的option显示对应的div
用JQuery实现选中select里面的option显示对应的div
|
1月前
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
8 0
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
38 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
21 0
|
3月前
|
JavaScript
原生js实现div跳动效果---很多炫酷效果的基本原理
原生js实现div跳动效果---很多炫酷效果的基本原理
20 0
|
3月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
29 0