zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Web API入门二(实例)
    Web API 入门一
    模板编程
    Unity3D中的AI架构模型
    Linux系列
    LCS记录
    hadoop使用问题
    AOP之Castle DynamicProxy 动态代理
    python 之readability与BeautifulSoup
    django rest_framework--入门教程3
  • 原文地址:https://www.cnblogs.com/rulasann/p/9229756.html
Copyright © 2011-2022 走看看