jQuery是一个javaScript函数库
向页面添加jQuery库
<head>
<script type=”text/javascript” src=”jquery.js”></script>
</head>
文档就绪函数
所有jQuery函数位于一个documentready函数中
$(document).ready(function(){
});
为了防止在文档完全加载之前运行jQuery代码
jQuery是为事件处理特别设计的
jQuery事件处理方法是jQuery中的核心函数
事件处理程序指的是当html中发生某些事件时所调用的方法
通常jQuery放在<head>部分
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
</script>
</head>
单独文件中的函数，希望jQuery函数易于维护，将jQuery函数放到独立的.js文件中
通过src属性来引用文件
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”src=”my_jquery_functions.js”></script>
</head>
【结论】
由于 jQuery 是为处理 HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的.js 文件中
如果存在名称冲突，则重命名 jQuery 库
$(this).hide()隐藏当前的html元素
$(“#test”).hide()隐藏id=”test”的元素
$(“p”).hide()隐藏<p>元素
$(“.test”).hide()隐藏所有class=”test”的元素
<script src=”/jquery/jquery-1.11.1.min.js”></script> <script type=”text/javascript”> $(document).ready(function(){ $(“#hide”).click(function(){ $(“p”).hide(); }); $(“#show”).click(function(){ $(“p”).show(); }); }); </script> </head>
|
其他一些事件函数
fadeIn() fadeOut() fadeToggle() fadeTo() slideDown() slideUp() slideToggle() |
一些jQuery事件：
$(document).ready(function)
$(selector).click(function)点击
$(selector).dblclick(function)双击
$(selector).focus(function)获取焦点
$(selector).mouseover(function)鼠标悬停
JQUERY:
1. 按钮监听事件
2. $(document).ready(function(){ 3. $(“#hide”).click(function(){ 4. $(“p”).hide(); 5. }); 6. $(“#show”).click(function(){ 7. $(“p”).show(); 8. }); 9. }); 10. |
11. 发送AJAX请求
Ajax是与服务器交换数据的艺术，它在不加载全部页面的情况下，实现了对部分网页的根更新
jQuery get() post()方法通过http get或post请求从服务器请求数据
get()从指定资源请求数据，可缓存数据
post()向指定资源提交要处理的数据，无缓存数据
$.get(URL,callback)
URL规定请求的网址
Callback请求成功后执行的函数名
$(“button”).click(function(){ $.get(“demo_test.asp”,function(data,status){ alert(“Date:”+data+”\nStatus:”+status); }); }); |
$.post(URL,data,callback)
URL规定请求的网址
Data是请求发送的数据
Callback请求成功后执行的函数名
$(“button”).click(function(){ $.get(“demo_test.asp”, { name:”Donald Duck”, city:”Duckburg” }， function(data,status){ alert(“Date:”+data+”\nStatus:”+status); }); }); |
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
