jQuery讲解

在讲解jQuery时，要和JavaScript进行对比的讲解，易于理解

 

JavaScript部分

<title>jquery讲解使用</title>
<script src="jquery-2.0.0.min.js"></script>
</head>

<body>

<div id="aa">hello</div>
<div class="bb">22</div>
<div class="bb">33</div>
<div class="bb">44</div>
<input type="text" name="cc" bs="dd"\>

</body>
<script type="text/javascript">

//根据id找元素,找到具体的DOM对象

var d=document.getElementById("aa");

var c=document.getElementsByClassName("bb");
c[0].style.Color="red";           //加索引是因为class数量多，以数组形势找

var div=document.getElementsByTagNameNS("div"); //根据标签名

var input=document.getElementsByName("cc");     //根据name找


//操作内容
//1.非表单元素：
d.innerHTML;  d.innerTEXT;  //获取内容； //添加内容，在后面加 ="";
//2.表单元素
d.value;   //获取内容；  //添加内容，在后面加="";


//操作属性
d.setAttribute("ps","pp");    //设置属性
d.getAttribute("ps");        //获取属性
d.removeAttribute("ps");    //移除属性


//操作样式
d.style.color="red";  //设置样式
d.style.backgroundColor="green";
alert(d.style.width);  //获取样式

　　

jQuery部分

//jQuery部分

$(document).ready(function(e) {
    
	//根据id找元素，找到JQUERY对象,数组形势；若果要去DOM对象，取索引0的元素
	var jd=$("#aa");  //根据id
	alert(jd[0]);
	
	var jc=$(".bb");  //根据class
	
	var div=$("div");  //根据标签名
	
	var ip=$("input[bs=dd]");  //根据属性筛选
	alert(ip.ep(0)[0]);     //第一个0代表数组索引，ep代表取第几个，第二个0代表取DOM对象
	for(var i=0;i<jc.length;i++)
	{
		jc.eq(i);//取数组里的第几个JQUERY对象
	}
	
	
	
//操作内容
	//1.非表单元素
	jd.text();//获取内容
	jd.text("hello"); //添加内容
	
	jc.html(); //获取内容
	jc.html("world"); //添加内容
	//2.表单元素
	jc.val(); //获取内容
	jc.val("hello,world"); //添加内容
	
	
//操作属性
	ip.attr("ps","bb"); //设置属性， 属性名，属性值
	ip.attr("ps");  //获取属性
	ip.removeAttr("ps"); //移除属性
	
	 jd.prop("color","red");//用法和attr()函数一样，
	 jd.prop("color");
	
	
//操作样式
	jc.css("background-color","red");
	
	

//给一个元素添加事件
	$("#aa").click(function(){
		
		alert("正确！");
		})
		

//给多个元素添加事件
	$(".bb").click(function(){
		
		alert($(this).text());
		})
		
		
		
//给多个元素设置相同的样式
	$(".bb").css("color","red");
	
	
	
});

　　

练习：使用jQuery实现“全选”等形式

 

前端页面显示

<title>JQ全选</title>
<script src="jquery-2.0.0.min.js"></script>
</head>

<body>
<input type="checkbox" id="all"/>全选<br />
<input type="checkbox" class="m" value="aa"/>aa 
<input type="checkbox" class="m" value="bb"/>bb 
<input type="checkbox" class="m" value="cc"/>cc 
<input type="checkbox" class="m" value="dd"/>dd 
<br />
<div>
     取选中的值：<input type="button" id="btn" value="点击测试"/>
</div>
<div>
    填写内容进行选中：<input type="text" id="tet"/>
                   <input type="button" id="tb" value="查找选中"/>
</div>

</body>

　　

 

一.全选功能jQuery代码

	//全选
    $("#all").click(function(){
		var jc=$(".m");
		var jd=$(this)[0].checked;
		jc.prop("checked",jd);   //设置属性：prop("属性名","属性值")函数，  //获取属性prop("属性名");
		})
});

二、取选中的值功能jQuery代码

//取选中的值
	$("#btn").click(function(){
		var jc=$(".m");
		for(var i=0;i<jc.length;i++)
		{
			if(jc.eq(i).prop("checked"))  //标签中都是固有属性，用prop()函数；含有自定义属性时用attr()函数
			{
				alert(jc.eq(i).val());
			}
		}
		})

　　

三、根据填写的内容进行选中

//填写内容进行选中
	$("#tb").click(function(){
		var v=$("#tet").val();
		var jc=$(".m");
		jc.prop("checked",false);
		for(var i=0;i<jc.length;i++)
		{
			if(jc.eq(i).val()==v)
			{
				jc.eq(i).prop("checked",true);
		    }
		}
		})

　　

 

 

 

在注册表单时，经常会看到

前端代码

<input type="checkbox" id="cr" />同意并接受注册协议
<input type="button" value="提交" id="btn" disabled="disabled"/>

　　

jq代码:

/*同意之后，按钮可用*/
	$("#cr").click(function(){
		
		
		var cr=$(this)[0];  //DOM方式
		if(cr.checked){
			$("#btn").removeAttr("disabled");
		}
		else{
			$("#btn").attr("disabled","disabled");
		}
        })

　　

	/*同意之后，按钮可用*/
	$("#cr").click(function(){

		var cr=$(this);     //jQuery方式
		if(cr.is(":checked")){
			$("#btn").removeAttr("disabled");
		}
		else{
			$("#btn").attr("disabled","disabled");
		}
		
		
	});

　　

 

posted @ 2016-05-15 22:27  坏小子1993  阅读(227)  评论(0)    收藏  举报