解析Jquery语法是什么?
Jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器中工作。
封装了JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,优化了HTML文档操作,事件处理,动画设计和ajax交互。
简单来说Jquery是一个JavaScript库,简化了JavaScript的编程,很容易学习。
事件,ready(fn)
当dom载入就绪就可以查询及操纵时绑定的一个要执行的函数,这是事件模块中最重要的一个函数,因为它可以提高web应用程序的响应速度。1复制代码类型:[javascript]
Jquery代码:
$().ready(function(){ });123复制代码类型:[javascript]
// 导包,引入JQ的文件<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>/*文档加载完成的事件*/jQuery(document).ready(function(){ alert("jQuery(document).ready(function()"); });// 最简单的写法$(function(){ alert("$(function(){"); });12345678910复制代码类型:[javascript]
js和jq对象之间的转换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script> <script> function changeJS(){ var div = document.getElementById("div1");// div.innerHTML = "JS" $(div).html("转成JQ对象") } $(function(){ $("#btn2").click(function(){ //div1// $("#div1").html("JQ"); //将JQ对象转成JS对象来调用 var $div = $("#div1");// var jsDiv = $div.get(0); var jsDiv = $div[0]; jsDiv.innerHTML="jq转成JS对象成功"; }); }); </script> </head> <body> <input type="button" value="JS" onclick="changeJS()" /> <input type="button" value="JQ" id="btn2" /> <div id="div1"> 这里的内容 </div> <div id="div1"> 这里的内容 </div> </body></html>123456789101112131415161718192021222324252627282930313233343536373839复制代码类型:[javascript]
事件
click([[data],fn])1复制代码类型:[javascript]
触发每一个匹配的click事件,这个函数会调用执行绑定到click事件的所有函数。
fn,在每个匹配元素的click世界中绑定的处理函数 [data],fn12复制代码类型:[javascript]
$("p").click();// 所有段落点击隐藏$("p").click( function(){ $(this).hide(); });12345复制代码类型:[javascript]
效果:
show([speed,[easing],[fn]]) [speed,[easing],[fn]] speed,[easing],[fn] speed,[easing],[fn]: speed三种预定速度之一的字符串("slow","normal",or"fase")或表示动画时长的毫秒数值,fn: 在动画完成执行的函数,每个元素执行一次// 显示段落html代码: <p style="display: none">hello</p> jquery代码 $("p").show()1234567891011复制代码类型:[javascript]
Jquery库可以通过一行简单的代码添加到网页中,库包含html元素选取和操作,css操作,html事件函数,JavaScript特效和动画,htmldom遍历和修改,ajax,utilities。
网页中添加Jquery库
<head><script type="text/javascript" src="jquery.js"></script></head>1234复制代码类型:[javascript]
简单案例:
<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });</script></head><body><p>dashucoding.</p><button type="button">Click me</button></body></html>123456789101112131415161718复制代码类型:[javascript]
// Google<head><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script></head>// Microsoft<head><script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script></head>12345678910复制代码类型:[javascript]
Jquery语法:
jQuery hide() 函数 $(this).hide()隐藏当前的 HTML 元素 $(selector).action() $(this).hide() - 隐藏当前元素12345复制代码类型:[javascript]
Jquery函数
// 为了防止文档完全加载就绪之前运行的代码$(document).ready(function(){ });
赞 (0)