jQuery

网站建设4年前发布
37 0 0
文章目录

$是jQuery的核心函数，能够完成jQuery的很多功能。$()就是调用$这个函数。

1、dom对象转换为jQuery对象

  • 先获得dom对象
  • $(dom对象) 就可以转换为 jQuery对象

2、jQuery对象转换为DOM对象

  • 先获得jQuery对象
  • jQuery对象[下标] 取出相应的DOM对象

.class 选择器：根据class查找标签对象

element 选择器：根据标签名查找标签对象

selector1,selector2 组合选择器：合并选择器1，选择器2的结果并返回

ancestor descendent 后代选择器：在给定的祖先元素下匹配所有的后代元素

parent->child 子元素选择器：在给定的父元素下匹配所有的子元素

prev + next 相邻元素选择器:匹配所有紧接在prev 元素后的next元素

prev~sibings 之后的兄弟元素选择器

基本过滤器

：first 获取第一个元素

：last 获取最后一个元素
eq(index) 匹配一个给定索引值的元素

属性过滤器

[attribute] 匹配包含给定属性的元素

[attribute==value] 匹配给定的属性是某个特定值的元素

表单过滤器

: text 匹配所有文本输入框

：password 匹配所有的密码输入框

：radio 匹配所有的单选框

：CheckBox 匹配所有的复选框

表单对象属性过滤器

:checked 匹配所有选中的单选，复选和下拉列表中选中的option标签对象

:selected 匹配所有选中的option

prop() 可以设置或获取属性的值，只推荐操作checked,readOnly,selected,disabled等

attr() 可以设置或获取属性的值，不推荐操作checked,readOnly,selected,disabled等

html() 可以设置或获取起始标签和结束标签的内容

text() 可以设置或获取起始标签和结束标签的文本
val() 可以设置或获取表单项的value属性值

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
 <script type="text/javascript">
 $(function () {
 //全选绑定单击事件
 $("#checkedAllBtn").click(function () {
 $(":checkbox").prop("checked",true);
 });

 //全不选绑定单击事件
 $("#checkedNoBtn").click(function () {
 $(":checkbox").prop("checked",false);
 });

 //反选绑定单击事件
 $("#checkedRevBtn").click(function () {
 $(":checkbox[name='items']").each(function () {
 //在each遍历的function函数中，有一个this对象，这个this对象是当前正在遍历的dom对象
 this.checked = !this.checked;
 });

 // alert($(":checkbox").length);//5
 //alert($(":checkbox[name='items']").length);//4
 var allCount = $(":checkbox[name='items']").length;//全部的数量
 var checkedCount = $(":checkbox[name='items']:checked").length;//被选中的数量

 // if(allCount==checkedCount){
 // $("#checkedAllBox").prop("checked",true);//注意使用的是哪一个的id属性的值 checkedAllBox
 // }else{
 // $("#checkedAllBox").prop("checked",false);
 // }
 //改进
 $("#checkedAllBox").prop("checked",allCount==checkedCount);

 });

 //提交绑定单击事件
 $("#sendBtn").click(function () {
 //获取全部的复选框
 $(":checkbox[name='items']:checked").each(function () {
 alert(this.value);
 })
 });

 //全选或者全不选的绑定单击事件
 $("#checkedAllBox").click(function () {
 // alert(this);//[object HTMLInputElement]
 // alert(this.checked);//true或者false
 $(":checkbox[name='items']").prop("checked",this.checked);

 });

 //给每个球绑定单击事件
 $(":checkbox[name='items']").click(function () {
 var allCount = $(":checkbox[name='items']").length;
 var checkedCount = $(":checkbox[name='items']:checked").length;
 $("#checkedAllBox").prop("checked",allCount==checkedCount);
 })

 });

 </script>
 </head>
 <body>

 <form method="post" action="">

 你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 

 <br />
 <input type="checkbox" name="items" value="足球" />足球
 <input type="checkbox" name="items" value="篮球" />篮球
 <input type="checkbox" name="items" value="羽毛球" />羽毛球
 <input type="checkbox" name="items" value="乒乓球" />乒乓球
 <br />
 <input type="button" id="checkedAllBtn" value="全　选" />
 <input type="button" id="checkedNoBtn" value="全不选" />
 <input type="button" id="checkedRevBtn" value="反　选" />
 <input type="button" id="sendBtn" value="提　交" />
 </form>

 </body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 <style type="text/css">
 select {
 width: 100px;
 height: 140px;
 }

 div {
 width: 130px;
 float: left;
 text-align: center;
 }
 </style>
 <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
 <script type="text/javascript">
 //完成页面的加载
 $(function () {

 //第一个按钮[选中添加到右边]
 $("button:eq(0)").click(function () {
 $("select:eq(o) option:selected").appendTo($("select:eq(1)"));
 });

 //第2个按钮[全部添加到右边]
 $("button:eq(1)").click(function () {
 $("select:eq(o) option").appendTo($("select:eq(1)"));
 });

 //第3个按钮[选中删除到左边]
 $("button:eq(2)").click(function () {
 $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
 });

 //第4个按钮[全部删除到左边]
 $("button:eq(3)").click(function () {
 $("select:eq(1) option").appendTo($("select:eq(0)"));
 });

 });

 </script>
 </head>
 <body>

 <div id="left">
 <select multiple="multiple" name="sel01">
 <option value="opt01">选项1</option>
 <option value="opt02">选项2</option>
 <option value="opt03">选项3</option>
 <option value="opt04">选项4</option>
 <option value="opt05">选项5</option>
 <option value="opt06">选项6</option>
 <option value="opt07">选项7</option>
 <option value="opt08">选项8</option>
 </select>

 <button>选中添加到右边</button>
 <button>全部添加到右边</button>
 </div>
 <div id="rigth">
 <select multiple="multiple" name="sel02">
 </select>
 <button>选中删除到左边</button>
 <button>全部删除到左边</button>
 </div>

 </body>
</html>


搜索所有与指定表达式匹配的元素。这个函数是找出**正在处理的元素的后代元素的好方法**。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

confirm()

confirm 是JavaScript语言提供的一个确认提示框函数.你传什么给他，他就提示什么；
当用户点击确定是就返回true，点击取消就返回false

first() 获取第一个元素

<ul>
 <li>list item 1</li>
 <li>list item 2</li>
 <li>list item 3</li>
 <li>list item 4</li>
 <li>list item 5</li>
</ul>

$('li').first()

//结果为：[ <li>list item 1</li> ]

// 在事件响应的function函数中，有一个this对象，这个this对象是正在响应事件的dom对象

:gt(index)

匹配所有大于给定索引值的元素

<table>
 <tr><td>Header 1</td></tr>
 <tr><td>Value 1</td></tr>
 <tr><td>Value 2</td></tr>
</table>

$("tr:gt(0)")

/* 结果：[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
*/

:contains(text)

匹配包含给定文本的元素

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

$("div:contains('John')")

结果：[

John Resig , Malcom John Sinclair ]

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

添加小工具
点此为“正文侧边栏”添加小工具