zoukankan      html  css  js  c++  java
  • jquery 入门与知识

    一)什么是jQuery?
    【以封装的思想,重构<<图片显示和隐藏>>】
    第三方组织预先写好的一些实用JS文件、类,方法,都统称为JS实用库,免费放在网上,同时配有相关的学习文档和案例,
    像以上实用库有很多,其它在JavaEE领域比较著名是的jQuery。

    *二)为什么要使用jQuery?
    (1)jQuery是目标是让程序员写少代码,做多事情
    (2)jQuery库,压缩后,容量较小,不会占用系统过多资料,WEB页面加载的速度相对较快
    (3)jQuery库,兼容各大主流浏览器,它是美国人开发的,主要依据美国人当时的浏览器环境
    (4)jQuery库,能完成原DOM能完成的所有操作,而且比DOM完成的更优
    (5)jQuery库,文档和案例非常全,便于程序员学习
    (6)jQuery库,推荐为每一个标签,取一个id属性
    (7)jQuery库,不是万能的,它只对JavaScript中的部份内容进行封装,而其它的部份,依然要使用传统方式
    因此,项目中的jQuery代码是一个杂合体。

    三)jQuery的开发步骤?
    (1)通过<script>标签,引用第三方js库,注意引用库的路径问题
    (2)调用jQuery库中相关的方法API,来完成业务操作

    四)DOM对象和jQuery对象相互转换
    (1)什么是DOM对象
    通过DOM的API,返回的对象,就叫做DOM对象,例如:document.getElementById("divID"):返回值:DOM对象

    (2)什么是jQuery对象
    A)通过jQuery的API,返回的对象,就叫做jQuery对象,例如:$("#divID"):返回值:jQuery对象
    B)$(dom对象),返回值就是jQuery对象,例如:$(document),$(this)

    (3)DOM对象转成jQuery对象
    $(dom对象)->jQuery对象

    (4)jQuery对象转成DOM对象
    A)jQuery对象[0]->dom对象
    B)jQuery对象.get(0)->dom对象

    注意:dom对象只能调用dom的api
    jquery对象也只能调用jquery的api
    不能混调

    五)DOM对象与jQuery对象对错误的显示
    (1)DOM对象的三种基本定位方式
    A)document.getElementById()
    B)document.getElementsByName()
    C)document.getElementsByTagName()

    (2)jQuery对象的三种基本定位方式
    A)id属性,例如:$("#id")
    B)标签名,例如:$("input")
    C)样式名,例如:$(".oneClass")

    (3)DOM对象出错的显示
    在不做判断的情况下,dom出错后,无显示

    (4)jQuery对象出错的显示
    在不做判断的情况下,jquery出错后,有显示,显示为"undefined"

    *六)jQuery九类选择器【在网页中,【查找】你需要的节点】(参见jQueryAPI.chm手册)
    (1)基本选择器[selector_1.html]
    $("#id")
    $("div")
    $(".oneClass")
    $("p,div,span")
    $("#id,div,.oneClass")

    (2)层次选择器[selector_2.html]
    $("form input"):祖先 后代
    $("form>input"):父亲>直接小孩
    $("form+input"):兄弟的第一个,只包括form元素下面
    $("form~input"):所有兄弟,只包括form元素下面的

    (3)增强基本选择器[selector_3.html]
    $("ul li:first")
    $("ul li:last")
    $("table tr:even")
    $("table tr:odd")
    $("table tr:eq(0)")
    $("table tr:gt(0)")
    $("table tr:lt(2)")
    $(":header")
    $(":checkbox:not(:checked)")选择所有未选中的复选框。

    (4)内容选择器[selector_4.html]
    $("div:contains('John')
    $("p:empty")
    $("div:has('p')
    $("p:parent")

    (5)可见性选器[selector_5.html]
    $("table tr:hidden")
    $("table tr:visible")

    (6)属性选择器[selector_6.html]
    $("div[id]")
    $("input[name='newsletter']")
    $("input[name!='newsletter']")
    $("input[name^='news']")
    $("input[name$='letter']")
    $("input[name*='e']")
    $("input[id][name$='letter']")

    (7)子元素选择器[selector_7.html]
    $("ul li:first-child")
    $("ul li:last-child")
    $("ul li:only-child")
    $("ul li:nth-child(1)"),索引,从1开始

    (8)表单选择器[selector_8.html]
    (9)表单对象属性选择器[selector_9.html]
    $("input:enabled")
    $("input:disabled")
    $(":checkbox:checked")
    $(":checkbox:not(:checked)
    $("select option:selected")

    *七)jQuery中常用方法(上)【在网页中,【操作】你需要的节点】
    jquery对象.size()-------------dom对象.length
    jquery对象.html()-------------dom对象.innerHTML,不能用于XML
    jquery对象.val()--------------dom对象.value
    jquery对象.css("back-ground","blue")
    jquery对象.addClass("onClass")
    jquery对象.attr("checked","checked")

  • 相关阅读:
    Alpha冲刺Day5
    Alpha冲刺Day4
    Alpha冲刺Day3
    团队作业——随堂小测
    Alpha冲刺Day2
    Alpha冲刺Day1
    团队项目需求分析
    结对项目第二次作业
    Linux中exec命令相关
    .lib和.dll文件
  • 原文地址:https://www.cnblogs.com/friends-wf/p/3808791.html
Copyright © 2011-2022 走看看