jQuery - 基础入门 , 选择器的使用!

1.什么是jQuery ?

jQuery是一个JavaScripe框架 , 它提供了强大的选择器.

它的核心理念: write less , do more (写得更少,做得更多)

使用前提: 需要导入js类库, 我们才可以使用.
例: jquery-1.4.2.js 非压缩版.方便阅读.
jquery-1.4.2.min.js 压缩版 , 内存小.

2.获取jQuery对象.

导入项目下之后 , 需要在html中引入: 
  <script src="../js/jquery-1.11.0.js" type="text/javascript"></script> 

基本语法: $("选择器")
获取: 
     input标签: <input id="aaa"> 
     获取jquery:var $a = $("#aaa"); 
     注: jQuery对象变量名建议以$开头.

3.jQuey页面加载事件.

js中:
       window.onload = function(){ alert() }
       注: js只能赋一个值 , 再次写将会被覆盖.
jQuery中:
       $(document).ready(function(){ alert() })
       简略写法: $(function(){ alert() })
       注: 可以使用多次 , 多个页面加载依次执行.
其他事件的使用:
       格式: $(“选择器”).事件名(function(){
                  // 注:事件名不写 on.
       })

      blur: 失去焦点.             focus: 获取焦点.
      keydown: 键盘按下      keyup: 键盘弹起.
      mouseover:鼠标移上   mouseout: 鼠标移除.
      click : 单击 .                   dblclick: 双击.

4.常见效果:

显示与隐藏:(重点)
       show(毫秒值) //显示
       hide(毫秒值) //隐藏
       toggle(毫秒值);//自动切换

滑入滑出:
       slideUp(毫秒值)//滑出
       slideDown(毫秒值)//滑入
       slideToggle(毫秒值)//自动切换

淡入淡出:
       fadeIn(毫秒值)//淡入
       fadeOut(毫秒值)//淡出
       fadeToggle(毫秒值)//自动切换
       fadeTo(透明度,毫秒值) 透明度的取值 0-1

5.jQuery的选择器:

1.基础选择器:

id选择器: $( “#id值” )

标签选择器: $( “标签名” )

类选择器: $( “.class类名” )

所有选择器: *

分组选择器: #xxx , #yyy

2.层次选择器:

A B : 获取A元素内部的所有的B元素.

A > B : 获取A元素下面的所有B子元素.

A + B : 获取A元素同级下一个B元素

A ~ B : 获取A元素同级所有B元素.

3.基本过滤选择器: (:打头)

扫描二维码关注公众号，回复： 4147435 查看本文章

: first 第一个.

: last 最后一个.

: even 偶数(从0开始计数) 页面显示奇数.

: odd 奇数

: eq(index) 指定第几个 =

: gt(index) 大于第几个 >

: lt(index) 小于n个. <

4.属性选择器:

[属性名] : 获取有属性名的元素.

[属性名=值] : 获取属性名=值的元素.

[…][…][…] : 复合属性选择器 , 多个属性同时过滤.

[属性名^=值] : 以值开头.

[属性名$=值] : 以值结尾.

[属性名*=值] : 包含值.

5.表单属性选择器:

:enabled 可用.

:disabled 不可用

:checked 选中.

:selected 选择.

6.class操作.

css(“css属性名”,“css属性值”): 设置属性.
css(“css属性名”) 获取属性.

addClass(): 给指定的class属性添加样式.
removeClass():删除样式.

7.属性操作:

attr(“元素属性名”,“元素属性值”) //设置属性(所有都起作用)
attr(“元素属性名”) / /获取属性(只获取第一个)

attr({ // 设置多个.
       元素属性名:元素属性值,
       元素属性名:元素属性值,
       …最后一个不要逗号
})

prop(): 操作checked属性.

注: prop和attr容易混 , 建议先使用prop()若没有效果,再使用attr();

01.隔行换色案例:

<style type="text/css">
		.odd{
			background-color: #BCD68D;
		}
		
		.even{
			background-color: #FFFFCC;
		}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
		// 页面加载事件. 
		$(function(){
			// 奇数和偶数 , 换色 .
			// $("tr:gt(0):odd").css("background-color","#BCD68D")
			// $("tr:gt(0):even").css("background-color","aqua")
			
			// 使用属性进行操作. 
			$("tr:gt(0):odd").addClass("odd")
			$("tr:gt(0):even").attr("class","even")
		})
</script>

02.全选/全不选案例:

总按钮上设置id: <input type="checkbox" id="selectAll"></th>
其余按钮上设置一样的class: <input type="checkbox" class="itemSelect">

<script type="text/javascript">
 		// 页面加载事件. 
 		$(function(){
 			// 设置全选复选框的点击事件.  
 			$("#selectAll").click(function(){
 				// 被点击时 , 获取复选框的状态. 
 				var status = $("#selectAll").prop("checked");
 				// 设置其他复选框的状态和总复选框的状态一样. 
 				$(".itemSelect").prop("checked",status); 
 			})
 		})		
	</script>

jQuery - 基础入门 , 选择器的使用!

猜你喜欢