Home | 简体中文 | 繁体中文 | 杂文 | Github | 知乎专栏 | 51CTO学院 | CSDN程序员研修院 | OSChina 博客 | 腾讯云社区 | 阿里云栖社区 | Facebook | Linkedin | Youtube | 打赏(Donations) | About
知乎专栏多维度架构

11.10. jQuery

过程 11.1. 

11.10.1. Selectors(选择器)

		
    if(window.location.hostname.indexOf("example.com") !== -1 ){
    	$("#nav3").hide();
    	$("#platform-nav li:nth-child(3)").hide();
    	$("#platform-nav li:nth-child(4)").hide();
    	$(".footer .fcon .coll").hide();
    	$(".footer .fcon .col3").hide();
    	$(".footer .fcon .col4").hide();
    }
		
		

11.10.2. jQuery 属性操作

11.10.2.1. is

		
<a id="startMenu" href="#" class="more">
		
<section id="menu" class="right_menu disnone">
  <dl>
    <dt><i></i></dt>
    <Dd>您好!创富金融欢迎您</Dd>
  </dl>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">简介</a></li>
    <li><a href="#">...</a></li>
    <div style="clear:both;"></div>
  </ul>
</section>

<script>
	$(document).ready(function() {
		
		$("#startMenu").click(function() {
			if($("#menu").is(":visible")){
				$("#menu").hide();	
			}else{
				$("#menu").show();
			}
			
		});
	});
</script>
		
		

11.10.2.2. css

		
$("button").click(function(){
  $("p:first").addClass("intro");
});


	
$( "p" ).removeClass( "myClass yourClass" )
$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

		
<p>hello</p>

<p id="hello">hello</p>
<script type="text/javascript">

$("p").addClass("Helloworld");
$("#hello").addClass("Helloworld");

</script> 
		
		
		

11.10.3. 时间触发

11.10.3.1. setTimeout 定时执行一次

$(document).ready(function(){
	setTimeout(function(){
		$("#error").hide();
	},3000);
});
			

11.10.3.2. setInterval 间隔执行

$(document).ready(function(){
	setInterval(function(){
		alert("test");
	},3000);
});
			

11.10.4. text

		
<p>hello</p>

<p id="hello">hello</p>
<script type="text/javascript">

$("p").text("Helloworld");
$("#hello").text("Helloworld");

</script> 
		
		
		

11.10.5. inArray

返回值是数组的key

	var host = window.location.hostname;
	var domains = ["netkiller.github.io","www.netkiller.cn"];

	if(jQuery.inArray( host, domains ) != -1) {
	...
	...		
	}
		

11.10.6. Ajax

11.10.6.1. Load

11.10.6.2. GET

			
jQuery.ajax({
	type:"GET",
	url: "/path/to/url",
	data: "code="+code,
	success:function(data){
		if(data.status){
			alert(data.text)
		}
	},
	error: function(){
	}
}); 			
			
			

11.10.6.3. Post

			

			
			

11.10.6.4. jsonp

			
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$.getJSON('http://www.foobar.com/json.php?callback=?', function(data){
alert(data.foo);
});
</script>

<?php
echo $_GET['callback'], '(', json_encode(array('foo' => 'bar')), ')';
?>
			
			
			
// Using YQL and JSONP
$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",
 
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    // Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});
			
			

11.10.6.5. No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因是 ajax 跨域请求造成

将 dataType: 'JSON' 替换为 dataType: 'JSONP'

11.10.6.6. 同步 AJAX

Jquery ajax 请求默认是异步方式,通过 async: false, 参数修改为同步模式。

			
	function exchange(money){
			var amount = 0;
			jQuery.ajax({
				type: "GET",
				url: "ajax.php?money=" + money,
				dataType: "json",
				async: false,
				data: "",
				success: function (data) {
					if (data.amount) {
						amount = data.amount
					}
				},
				error: function () {
				}
			});
		return amount;
		}		
			
			

11.10.7. Form 表单处理

11.10.7.1. select

			
	var select = $('#bank');
	//$('option', select).remove();
	$.each(banklist, function(key,code) {
		var option = new Option(key, code)
	    select.append( option );
	});			
			
	$('#bank').append($("<option></option>").attr("value","CMB").text("招商银行"));
			
			

11.10.7.2. input

设置 value

$("#amount").val("100");
			

11.10.8. Jquery 事件

11.10.8.1. click 事件

		
$(document).ready(function() {

	$("#Button1").click(function() {
		$("#Tab1").hide();
		$("#Tab2").show();
	});
	$("#Button2").click(function() {
		$("#Tab1").show();
		$("#Tab2").hide();
	});	
});			
		
		

解除事件绑定

		
$( "#Button1").unbind( "click" );
$( "#Button2").unbind( "click" );		
		
		

事件中绑定事件

		
			
$("#Button").click(function() {	
	$( "#Button1").unbind( "click" );
	$( "#Button2").unbind( "click" );
	
	$("#Button1").click(function() {
		$("#Tab1").hide();
		$("#Tab2").show();
	});
	$("#Button2").click(function() {
		$("#Tab1").show();
		$("#Tab2").hide();
	});	
});	
		
		

11.10.9. Garlic.js - 表单数据持久化

http://garlicjs.org/

Garlic.js 可以让你自动的持久化表单中的数据到本地,直到表单被提交。这样用户就不用担心因为误操作导致表单输入的数据丢失。

使用方法很简单:

		
<script type="text/javascript">
  $( 'form' ).garlic();
</script>