四时宝库

程序员的知识宝库

解析Jquery语法是什么?(jquery解析html文本)

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="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
// Microsoft
<head>
<script type="text/javascript" src="http://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(){
});

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接