jquery基础解析之选择器

一、jquery概述

jquery是javascript库，简化了js编程，其中包含了

        1.对html元素的选取和操作

        2.对css样式进行操作

        3.html事件函数

        4.js特效和动画

        5.DOM对象的遍历和修改

        6.ajax

        7.Utilties工具

 安装以及引用

 1.1.本地文件：创建js目录，将jquery文件放置到该目录

 jquery文件有两种：

             1.开发版：适合学习和开发使用，格式是按照原有的js代码进行格式化，体积较大
              2.发布版：适合项目的上线和使用，格式是被压缩过的，体积较小

2.通过script标签,src属性表示jquery文件的相对路径,注意引入标签中不能再进行编码

jquery语法

$（select）.action（）

其中$表示定义jquery，selector表示选择器，用于选取或查找html元素，action（）表示jquery对元素进行操作

举例：$("#div-1").hide()选取id属性为div-1的html元素进行隐藏
    
    jquery目标就是，write less do more（写的少做的多）

文档就绪事件

起因：js代码在进行元素选择时有可能由于页面（文档）还未加载完成而导致元素选取不当，导致报错，文档就绪事件：在整个页面（文档）完全加载后在触发的事件
   $(document).ready(function(){
       jquery代码
       
   })
   //精简写法
   $(funtion(){
       jquery代码
   })

jquery选择器

1.#id选择器
                // $("#id属性").action()
                // click（function(){}）点击事件,function是点击后执行的1方法

$("#btn1").click(function(){
					$("#p2").hide();
					
				})

2..class选择器
                 $(".class属性").action()

$("#btn2").click(function(){
					$(".pp").css("font-size","72px")
					
				})

        3.元素选择器
                    基于元素名选取
                    例如选取所有p元素$("p").action()

$("#btn1").click(function(){
					$("p").css("color","red")
				})

4.枚举选择器（组合选择器）
             利用"，"将多个选择器进行分隔，使满足所有选择器的元素进行选取
             例如，选取所有的p元素，所有的class属性为div的元素$("p,.div").action()

$("#btn2").click(function(){
					$("p,.div").css("background-color","yellow")
				
			})

 5.子元素选择器，后代选择器
             子元素选择器：只选取子元素$("#id>.classname")选取id属性为id元素的所有ckass属性          为classname的后一代元素
  6. 后代选择器：选取所有后代元素
             $("#id .classname")选取id属性为id元素的所有后代中class属性为classname的元素

$("#btn3").click(function(){
				$(".div-1>h2").hide()
				
			})
			$("#btn4").click(function(){
				$(".div-1 h2").hide()
				
			})

7.紧邻下一个元素选择器
             $("#id+.classname")
             选取id属性为id的下一个class属性为classname的元素
             注意：如果身后第一个元素类型不是+后选择区选取的类型，那么无法选中

8.兄弟元素选择器
             $("#id~.classname")
             选取id属性为id所有身后的兄弟中class属性为classname的元素

$("#btn5").click(function(){
				$("#h1+p").hide()
				
			})
			$("#btn6").click(function(){
				
				$("h1~p").hide()
			})
		

9.元素属性过滤选择器
             含义属性： $("a[href]")： 选取超连接标签中href属性的元素
             属性值等于   $(a[href='www.badu.com']) 选取超链接标签中href属性为a1的元素

$("#btn7").click(function(){
			$("a[href]").css("text-decoration","none")
		})
				
		$("#btn8").click(function(){
			$("a[id='a1']").css("text-decoration","none")
		})	

10.过滤选择器
         使用：后跟一些过滤条件，将满足条件的元素进行选取
         $("li:first")选取列表项中的第一个
         $("li:last")选取列表项中的最后一个
         $("li:even")选取下标为偶数的li
         $("li:odd")选取下标为奇数的li
         $("li:eq（4）")选取下标等于4的li
         $("li:gt（2）")选取下标大于2的li
         $("li:lt（2）")选取下标小于2的li
         $("li:not（#id）")剔除id=id以外的所有li

$("#btn9").click(function(){
			$("li:first").css("font-size","30px")
			
		})
		$("#btn10").click(function(){
			$("li:even").css("font-size","30px")
			
		})
		$("#btn11").click(function(){
			$("li:eq(4)").css("font-size","30px")
			
		})
			$("#btn12").click(function(){
			$("li:not(#li3)").css("font-size","30px")
			
		})

11.状态选择器
         $("input:checked")选取被选中的input标签
         $("input:disabled")选取不可用的input
         $("option:selected")选取被选择的菜单