• JQuery 菜鸟笔记(一)


    什么是JQuery

    JQuery是一个优秀的javascript类库,jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果,并且方便地为网站提供Ajax交互。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆javascript来调用命令了,只需定义id即可。(跟css有点类似)

    它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
    jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
    jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
    jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

    开始学习--要求

    务必要理解Javascript

    认识JQuery需要做的五件事

    1.Find:找到HTML页面中的元素
    2.Change:改变HTML的内容
    3.Listen:根据用户的操作做出反馈,比如按下按钮
    4.animate:在页面中使用动画效果
    5.talk:与网络互交,如果不想刷新页面而改变页面内容

    什么是Document Object Model

    由浏览器生成的树状结构,从而能快速找到HTML中的元素,Document Object Model简称:DOM

    我们键入了一个地址,浏览器就会从地址中接受HTML,就像这样吧内容一段一段的加载到DOM中,一收到元素,就在DOM中创建节点,也就是HTML中的<!DOCTYPE html>的下面<html>...</html>,可以说HTML是docunment的子节点,document就是HTML的父节点。

    Function

    为了用JQuery来操作DOM,我们把代码写到function中已达到目的,如: JQuery(<Code>); 改成JQuery(document);其中
    document也就是DOM

    Find
    我们可以用选择器来找到DOM中的元素

    <body>
    <h1>Where do you wany to do?</h1>
    </body>

    我们要找到h1的元素,可
    以这样写:Jquery("h1");简写可以这样写 $("h1");

    Change
    如何改变h1中的元素的值?我们首先获取到值,如:$("h1").text(); 这样就能获取到 “Where do you wany to do?”

    改变:我们只需要将变化的值放到text的方法中就行了,如: $("h1").text("where to?"); 这样就能把DOM里面h1的text元素替换成"Where to?"

    注意:HTML在浏览器中加载,可能JavaScript会在DOM加载完之前就运行了,这时候DOM是没有加载完的,这样h1元素可能不会Change的。
    你要确定DOM在加载完之后在和HTML互交


    Ready
    在页面加载完之后,就会产生一个事件,也就是 准备好了 ,我们要注意这个事件,来保证在DOM加载完之后JQuery才开始运行,
    我们可以这样写:
    JQuery(doucment).ready(function(){<code>});
    这样一旦整个页面加载完function里面的代码就会运行

    最后Change代码应该这样写:
    JQuery(doucment).ready(function(){$("h1").text("Where to?")});

    这样整个页面加载完之后就会去寻找h1标签,改变h1的text

    未完待续   2014-09-25

  • 相关阅读:
    四月书籍
    iOS 第三方登录之 QQ登录
    百度面试经验之谈 ----------转
    OC浅析一
    书目列表
    UIStroryboard分类
    ios基础笔记(一)
    IOS笔记-代码块(微博项目)-1.0
    IOS控件内容 对齐方式
    android同一个TextView设置不同颜色字体
  • 原文地址:https://www.cnblogs.com/abc1069/p/3993942.html
Copyright © 2020-2023  润新知