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

 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 !--显示区域-- 

 div id="dam" /div 

 divid="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 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代码：

 div 测试块 /div 

 div 对比块 /div 

 inputtype="button" id="aa" value="点击启用ajax" 

 

效果

①点击按钮后，读取同目录下的a.txt文件；

②用a.txt文件的内容，替代 的标签的内容；

③假如有多个 的标签，则每个都会被替换；

 

 

进阶：加载文件中某一部分

将代码更改为：

$(".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），第三个参数是回调函数（触发事件后执行的内容）；

 

 

【JavaScript】42_数组的方法 # 18、数组的方法 ## sort() - sort用来对数组进行排序（会对改变原数组） - sort默认会将数组升序排列 注意：sort默认会按照Unicode编码进行排序，所以如果直接通过sort对数字进行排序 可能会得到一个不正确的结果 - 参数： - 可以传递一个回调函数作为参数，通过回调函数来指定排序规则 (a, b) = a - b 升序排列 (a, b) = b - a 降序排列 ## forEach() - 用来遍历数组 - 它需要一个回调函数作为参数，这个回调函数会被调用多次 数组中有几个元素，回调函数就会调用几次
【JavaScript】36_数组的常用方法 # 9、数组的方法 ## push() - 向数组的末尾添加一个或多个元素，并返回新的长度 pop() - 删除并返回数组的最后一个元素 ## unshift() - 向数组的开头添加一个或多个元素，并返回新的长度 ## shift() - 删除并返回数组的第一个元素 ## splice() - 可以删除、插入、替换数组中的元素 - 参数： 1. 删除的起始位置 2. 删除的数量 3. 要插入的元素 - 返回值： - 返回被删除的元素 ## reverse() - 反转数组 ```html script let arr =