前端—03：JQuery

1.JQ中根据ID查找元素： $("#ID的名称")

 

2.JQ中的动画效果：

• show()
• hide()
• slideUp()
• slideDown()
• fadeIn()
• fadeOut()
• animate() : 自定义动画

 

---

3.基本选择器

• ID选择器 :     #ID的名称
• 类选择器:     以 . 开头  .类名
• 元素选择器:    标签的名称
• 通配符选择器:   * 
• 选择器,选择器:  选择器1,选择器2

<script>
    //文档加载事件,页面初始化的操作
    $(function(){
		//初始化操作: 给按钮绑定事件
		$("#btn1").click(function(){
			$("#two").css("background-color","palegreen");					
		});
				
		//找出mini类的所有元素
		$("#btn2").click(function(){
			$(".mini").css("background-color","palegreen");					
		});
		$("#btn3").click(function(){
			$("div").css("background-color","palegreen");					
		});
		$("#btn4").click(function(){
			$("*").css("background-color","palegreen");
		});
		/*选择器分组*/
				
		//找出mini类 和 span元素
		$("#btn5").click(function(){
			$(".mini,span").css("background-color","palegreen");
		});
    });
</script>

 

 

4.层级选择器

• 子元素选择器:   选择器1 > 选择器2
• 后代选择器:  选择器1 儿孙
• 相邻兄弟选择器 :  选择器1 + 选择器2 : 找出紧挨着的一个弟弟
• 找出所有弟弟:  选择器1~ 选择器2   : 找出所有的弟弟

<script>
    //文档加载事件,页面初始化的操作
    $(function(){
        //初始化操作: 给按钮绑定事件
        //找出body下面的子div   
        $("#btn1").click(function(){
	    $("body > div").css("background-color","palegreen");					
	});
	//找出body下面的所有div
	$("#btn2").click(function(){
		$("body div").css("background-color","palegreen");					
	});
	$("#btn3").click(function(){
		$("#one+div").css("background-color","palegreen");					
	});
	$("#btn4").click(function(){
		$("#two~div").css("background-color","palegreen");					
	});		
    });
</script>

 

5.JQ中的属性选择器

• 选择器[href]  : 单个属性
• 选择器[href][title] : 多个属性
• 选择器[href][title='test'] : 多个属性,包含值

$(function(){
    //找到有name属性的input
    $("#btn1").click(function(){
	    $("input[name]").attr("checked",true);
    });
    $("#btn2").click(function(){
	    $("input[name='accept']").attr("checked",true);
    });
    $("#btn3").click(function(){
	    $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
    });
});

 

 

---

6.JQ中的基本过滤器

• 选择器:过滤器   $("div:first")
• :first    找出第一个元素
• :last    找出最后一个元素
• :even   找出索引为偶数
• :odd    找出奇数索引 
• :gt(index) :  大于索引
• :lt(index)   小于
• :eq(index)  等于

<script>
    //文档加载事件,页面初始化的操作
    $(function(){
	//初始化操作: 给按钮绑定事件
	//过滤出所有div中第一个元素
	$("#btn1").click(function(){
		$("div:first").css("background-color","palegreen");					
	});
				
	//过滤出所有div中偶数位的div
	$("#btn2").click(function(){
		$("div:even").css("background-color","palegreen");					
	});
	$("#btn3").click(function(){
		$("div:odd").css("background-color","palegreen");					
	});
	$("#btn4").click(function(){
		$("div:gt(2)").css("background-color","palegreen");					
	});
    });
</script>

 

 

7.JQ中的表单过滤器

• :input   找出所有输入项:  input  textarea  select 
• :text   找出type类型为 text
• :password

<script>
  //1.文档加载事件	
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>

 

 

---

找出select中被选中的那一项:   option:selected

获取所有行：   table.rows

 

$(function)  : 文档加载完成的事件
css()  : 	修改css样式
prop() :    修改属性/ 获取属性  例如：prop("src","../img/1.jpg");
html() :    修改innerHTML
attr  :    操作一些自定义的属性  例如：<img  abc='123' />中的属性abc

append : 	给自己添加子节点
appendTo :  将自己添加到别人家,给自己找一个爹
prepend :   在自己最前面添加子节点
after	:   在自己后面添加一个兄弟
before  :   在自己前面添加一个兄弟
empty	:   清空所有子节点

---

数据交换格式：

• json
• xml

JSON格式

• JSON对象

json { key1:value} {"username":"zhangsan","password":"123"}

• JSON数组

json [{ key1:value},{ key1:value},{ key1:value}]

 

 

---