jquery获取checkbox选中的值_jQuery

java046

1 .操作页面元素的属性 A

重点梳理：

1）获得元素对象

var tex=$("#inp1");

2）获得元素对象的属性

var te=tex.attr("type"); var cl =tex.attr("class");

3）获得元素固有的属性值

var val =tex.attr("value"); console.log(te+"------"+cl+"-----"+val);

4）获得文本框实时输入的值

var val2=tex.val(); alert(val2); }

间接获取对象的方式：

1)parent() 获取匹配元素的父节点。

2)Children() 获取匹配元素的所有子节点。

3)next() 获取紧邻的下一个节点。

4)nextAll(selector) 获取匹配节点后面所有满足选择器条件的节点。

5)prev() 获取紧邻的上一个节点。

6)prevAll(selector) 获取匹配节点前面所有满足选择器条件的节点。

代码示例：

<!

2 .操作页面元素的属性 B

操作元素的属性的两种方式

1）attr(“属性名”,”值”);

2）val(值);

3)prop("checked") 的值只能是布尔值，仅用于条件判断。

4）attr("checked") 的值有可能是checked。

5) prop("checked",true) -->将被匹配的元素的checked属性改为true，让其被勾选。

代码示例：

<!

3 .操作页面的文本和值 A

重点梳理：

1）获得div元素对象

var div =$("#div1");

2）获得元素的内容 含有HTML的标签的

var ht=div.html(); console.log(ht);

3）只是获得文本内容， 不含有HTML标签

var te =div.text(); console.log(te);

4）获得文本框的值

var val=$("#inp1").val(); console.log(val);

代码示例：

<!

4 .操作页面的文本和值 B

重点代码梳理：

1）可以识别里面的html代码

div.html("<b>我们都爱笑</b>");

输出结果：

2）识别不了里面的HTML代码

div.text(div.text()+"<b>我们都爱笑</b>");

输出结果：

3）获得文本的值

$("#inp1").val("sxt");

4）注意特殊情况：

Select 、textarea 两个标签获得值得时候需要用val()

代码示例：

<!

5. 操作页面的元素 A

重点梳理：

1）创建了新的元素

var p=$("<p> <b>List Item0</b> </p>")

2）添加子元素 先获取元素对象，后增加元素--->增加位置为 现有元素之后

$("#div1").append(p);

3）把p元素增加到 div里面

p.appendTo("#div1");

4）平级元素的添加 --->位置--->现有元素之前

$("#div1").prepend(p);

p.prependTo("#div1");

5）平级元素的添加 --->位置--->现有元素之后

p.insertBefore("#div1");

$("#div1").before(p);

6）平级元素的添加 --->位置--->现有元素之后

p.insertAfter("#div1");

$("#div1").after(p);

7）替换

//$("div p:nth-child(1)").replaceWith(p); //p.replaceAll("div p:nth-child(5)");

8）删除

//$("#div1").remove();//删除全部 //$("div p:nth-child(2)").remove();//删除指定元素

9）清空内容

//$("#div1").empty(); //$("div p:nth-child(5)").empty();//清空指定内容

代码示例：

<!

6.操作界面案例：

<!

7. 事件处理

1）页面加载完执行的操作的三种方式

1//$(function(){}) 2//jQuery(function(){}) 3//$(document).ready(function(){})

2）事件的基础绑定

$("#bu1").click(function(){ alert("单击事件"); })

$("#bu1").dblclick(function(){ alert("双击事件"); })

3）bind事件绑定

$("#bu2").bind('click',function(){ alert("单击事件绑定"); })

绑定多个事件 内容还支持json数据格式

$("#bu2").bind({ 'click':function(){}, 'dblclick':function(){}, 'blur':function(){} }

4）one一次事件绑定（绑定的事件只能执行一次。）

$("#bu3").one('click',function(){ alert("一次事件绑定"); })

5）tigger事件操作 （调用其他事件。）

$("#bu4").click(function(){ $("#bu1").trigger('dblclick'); $("#bu3").trigger('click'); })

6）事件的解绑

$("#bu5").click(function(){ //事件的解绑 //解绑指定对象上的所有事件 $("#bu1").unbind(); //解绑指定的事件 $("#bu1").unbind("dblclick"); })

代码示例：

<!

8. 动画功能

重点梳理：

1）获得div对象

var div1 =$("#div1");

2）3s隐藏动画

div1.hide(3000); div1.show(3000);

3）隐藏的显示 ---显示的隐藏

$("div").toggle(3000);

4）滑动上

div1.slideUp(3000);

5）滑动下

div1.slideDown(3000);

6）滑动上--滑动下 滑动下---滑动上

$("div").slideToggle(3000);

7）淡出

div1.fadeOut(3000);

8）淡入

div1.fadeIn(3000);

代码示例：

<!

9. Jquery 的封装原理

匿名函数的自调用和>闭包原理。

闭包的优点：

1)可减小全局变量的对象,防止全局变量过于庞大导致难以维护。

2)防止修改变量的值,因为内部的变量外部是无法访问且无法修改,安全性高。

3)读取函数内部的变量,让这些变量始终保存在内存中。