javascript和jquery

JavaScript

1.概述

JavaScript是一种基于对象和事件驱动,并具有安全性能的脚本语言。

 

2.语法

HTML 中的脚本必须位于 <script> </script> 标签之间。

 

脚本可被放置在 HTML 页面的 <body> <head> 部分中;

多数情况下放在<head>部分中,可优于其他代码被加载执行。

 

例:

<!DOCTYPE html>

<html>

<body>

<h1>我的 Web 页面</h1>

<p id="demo">一个段落</p>

<button type="button" onclick="myFunction()">尝试一下</button>

<script> function myFunction()

{

document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";

}

</script>

 </body>

</html>

 

2.1 innerHTML

innerHTMLJS是双向功能: 获取对象的内容    向对象插入内容

语法:

HTMLElementObject.innerHTML=text  

例:

<div id="aa">这是内容</div>  

 可通过document.getElementById('aa').innerHTML 来获取idaa的对象的内嵌内容;  

也可以对某对象插入内容:

 document.getElementById('abc').innerHTML='这是被插入的内容';     

//idabc的对象插入内容。  

2.2链接脚本文件

格式:

<head>

<script type=”text/javascript” src=”xxx.js”></script>

</head>

注:.js文件中只有脚本,不包含HTML标记。

 JQuery

1:概述

Jqueryjs的一个工具库

2jquery的功能

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

除此之外,Jquery还提供了大量的插件。最常见的是jquery UIjquery easyui

3:引用jquery

<head>

<script src="jquery-1.10.2.min.js"></script>

</head>

4:语法

$(selector).action()

例:$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test"  <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

5:关于入口函数与JS的区别

jquery的入口函数:

$(document).ready(function(){    

 // 执行代码

}); 

或者

$(function(){     

// 执行代码

});

JavaScript 入口函数:

window.onload = function () {

// 执行代码

}

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。

JavaScript  window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

6:事件处理区别

事件源:

Jsdocument.getElementById(“id”)

jQuery$(“#id”)

事件:

Js :document.getElementById(“id”).onclick

jQuery: $(“#id”).click

注:jQuery的事件不带on

事件处理程序:

Js :

document.getElementById(“id”).onclick = function(){// 语句}

jQuery :

$(“#id”).click(function(){// 语句});

(第6点有参考,链接我忘记了,谁知道的话帮我贴一下)

javascript实例参考:http://www.runoob.com/js/js-examples.html

jquery实例参考:http://www.runoob.com/jquery/jquery-examples.html

猜你喜欢

转载自www.cnblogs.com/rulasann/p/9229756.html