Web前端——JQuery的进阶（动态的显示某个div控件,选择器的构建）

来源：互联网发布：java四个月培训找工作编辑：程序博客网时间：2024/06/08 16:54

案例1：

预备知识：

display：block, none, table-row 隐藏以后不占空间

visibility: visible, hidden 隐藏以后还占空间

需求描述：动态的显示某个div控件。相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#info{

width:500px;

height:500px;

background-color:red;

display:none;

}

</style>

$(function(){

$("#btn").click(function(){

$("#info").show(2000);

});

</script>

<title>无标题文档</title>

</head>

<body>

</body>

</html>

案例2：

需求描述：多选框的详细分析。相关代码：

<!DOCTYPE html>

<title>jQuerydemo</title>

$(function () {

$("#checkedall").click(function () {

var flag = this.checked;

$(":checkbox[name='items']").attr("checked", flag);

});

$(":checkbox[name='items']").click(function () {

$("#checkedall").attr(

"checked", $(":checkbox[name='items']").length == $(":checkbox[name='items']:checked").length)

});

</script>

</head>

<body>

<div>

<input type="checkbox" id="checkedall" />全选/全不选

<br /><input type="checkbox" name="items" value="football" />足球

<input type="checkbox" name="items" value="basketball" />篮球

<input type="checkbox" name="items" value="badminton" />羽毛球

</div>

</form>

</body>

</html>

案例3：

需求描述：JQuery对象与Dom对象的区别和联系。相关代码：

<!DOCTYPE html>

//$(function () {}) 相当于window.onload

$(function () {

$("button").click(function () {

alert("hello world");

var $btn = $("button"); //jquery是一个数组对象，把所有button控件构造数组

alert($btn.length); //弹框为2，说明有两个button

alert($btn[0].firstChild.nodeValue); //第一个的value ，$btn[0].innerText方法不止一种

var btn = document.getElementById("btn2"); //Dom对象

alert("--" + $(btn).text()); //Dom对象转为JQuery对象只需加$()

});

</script>

</head>

<body>

<div>

<button>ClickMe</button>

<br />

<button id="btn2">CLickMe2</button>

</div>

</form>

</body>

</html>

案例4：

需求描述：JQuery选择器的应用。相关代码：

$(function () {

//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")

//2. 为选择的 jQuery 对象添加 onclick 响应函数:

// $("#btn1").click(function(){}), 响应函数的代码

//写在 function(){} 的中括号中.

$("#btn1").click(function () {

$("#one").css("background", "#ffbbaa");

});

$("#btn2").click(function () {

$(".mini").css("background", "#ffbbaa");

});

$("#btn3").click(function () {

$("div").css("background", "#ffbbaa");

});

$("#btn4").click(function () {

$("*").css("background", "#ffbbaa");

});

$("#btn5").click(function () {

$("span,#two").css("background", "#ffbbaa");

});

})

</script>

案例5：

需求描述：JQuery选择器的应用。相关代码：

$(function () {

$("#btn1").click(function () {

$("body div").css("background", "#ffbbaa"); //选择 body 内的所有 div 元素

});

$("#btn2").click(function () {

$("body > div").css("background", "#ffbbaa"); //在 body 内, 选择子元素是 div 的

});

$("#btn3").click(function () {

$("#one + div").css("background", "#ffbbaa"); //选择 id 为 one 的下一个 div 元素

});

$("#btn4").click(function () {

$("#two ~ div").css("background", "#ffbbaa"); //选择 id 为 two 的元素后面的所有 div 兄弟元素

});

$("#btn5").click(function () {

$("#two").siblings("div").css("background", "#ffbbaa");//选择 id 为 two 的元素所有 div 兄弟元素

});

$("#btn6").click(function () {

//以下选择器选择的是近邻 #one 的 span 元素, 若该span

//和 #one 不相邻, 选择器无效.

//$("#one + span").css("background", "#ffbbaa");

$("#one").nextAll("span:first").css("background", "#ffbbaa");//选择 id 为 one 的下一个 span 元素

});

$("#btn7").click(function () {

$("#two").prevAll("div").css("background", "#ffbbaa");//选择 id 为 two 的元素前边的所有的 div 兄弟元素

});

})

</script>

案例5：

需求描述：JQuery表单选择器的应用。相关代码：这个部分比较重要

$(function () {

$("#btn1").click(function () {

//使所有的可用的单行文本框的 value 值变为晨晨

alert($(":text:enabled").val()); //弹出框是符合条件第一个文本框中的值

// $(":text:enabled").each(function () {

// alert(this.value); //这样是全部显示，都会弹出框的

// });

$(":text:enabled").val("晨晨"); //改变的是符合条件所有文本框中的值

});

$("#btn2").click(function () {

alert($(":text:disabled").val()); //弹出框是符合条件第一个文本框中的值

$(":text:disabled").val("www.baidu.com"); //改变的是符合条件所有文本框中的值

});

$("#btn3").click(function () {

var num =

$(":checkbox[name='newsletter']:checked").length;

alert(num);

});

$("#btn5").click(function () {

//实际被选择的不是 select, 而是 select 的 option 子节点

//所以要加一个空格.

//var len = $("select :selected").length

//alert(len);

//因为 $("select :selected") 选择的是一个数组

//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.

//alert($("select :selected").val());

//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在

//得到的 DOM 对象, 而不是一个 jQuery 对象

$("select :selected").each(function () {

alert(this.value);

});

$("#btn4").click(function () {

$(":checkbox[name='newsletter']:checked").each(function () {

alert(this.value);

});

})

</script>

</head>

<body>

<h3>表单对象属性过滤选择器</h3>

<button id="btn1">对表单内可用input 赋值操作.</button>

<button id="btn2">对表单内不可用input 赋值操作.</button><br /><br />

<button id="btn3">获取多选框选中的个数.</button>

<button id="btn4">获取多选框选中的内容.</button><br /><br />

<button id="btn5">获取下拉框选中的内容.</button><br /><br />

可用元素: <input name="add" value="可用文本框1"/><br/>

不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br/>

可用元素: <input name="che" value="可用文本框2"/><br/>

不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br/>

<br/>

多选框: <br/>

<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1

<input type="checkbox" name="newsletter" value="test2" />test2

<input type="checkbox" name="newsletter" value="test3" />test3

<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4

<input type="checkbox" name="newsletter" value="test5" />test5

下拉列表1: <br/>

</select>

下拉列表2: <br/>

</select>

</form>

</body>

共同进步。

0 0