`
wanxiaotao12
  • 浏览: 472320 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery基础用法

阅读更多

jQuery
   1.特点:
   小巧
   功能强
   跨浏览器
   插件

   2.使用
    实际是js文件
    a)  复制js到WebRoot
    b)  页面<script src="jquery.js" charset=""></script>

   3.核心对象及常用方法和属性
     a)名称
     jQuery和$
     用$找出来的对象叫jQuery对象
     用document找出来的对象叫Dom对象
    
     b)dom和jquery对象转换
     jQuery对象.get(0) --->dom对象
     $(dom对象)--->jQuery对象
   
     c)jQuery对象方法
      .show() 显示
      .hide() 隐藏
      .toggle() 显示或隐藏切换
      $("div").hide();
      $("#myid").show();
      $(".myclass").show(100);

      .size() 找到多少个对象
      var n = $("div").size()

      文本框赋值(value)
      $("#myid").val(123);
      .val()取值

      层的内容.innerHTML/.innerText
      $("div").html() ;
      $("div").html(123);
      $("div").html("<input type=button>");
      $("div").text("<input type=button>");

      样式 document....style.color="red"
      $("div").css("color","red").css("font-size","18");
      $("div").css({color:"red","font-size":18});

      删除
      $("div").remove(); 删除所有div

      添加
      父加子: $("div").append("<input button>");
              $("div").append( $("#myid") );
      子加父
           $("input").appendTo(  $("div") );

      对象属性
        $("input").attr("checked",true);

      去首尾空格:
         $.trim(字符串)
$("div").each(  function(i,obj){}  );
$.post(url,function(x){});
$.post(url,{键:值},function(x){});
$.getJSON(url,function(x){//这里x已转成json了,不要用eval});

      克隆
        $("div").clone();

4. 选择器
    a) 类选择器
       <input type=text class="myclass">
       $(".myclass")     找多个
    b) id选择器  
       <input type=text id="myid">
       $("#myid") 找一个
       相当于:document.getElementById("myid")
    c) 标记选择器   找多个
       $("div,span")
       相当于document.getElementsByTagName()
    d) 表单选择器
       $(":text")   所有文本框
       $("input[type=text][value='']")

       $(":radio")  所有单选框
       $(":checkbox") 所有复选框
    e) 表单属性选择器
       $(":checkbox:checked")或$(":checked:checkbox")
       $(":checked")  找所有选中(单选框和复选框)
       $(":selected") 找所有选中列表框
    f) 层级选择器
       父找子 d找c
       $("table").find("tr")  //找子孙都可以
       $("table>tbody>tr") 找所有tr
       $("table>tbody>tr:first") 找第一行
       $("table>tbody>tr").eq(0) 找第一行
       $("table>tbody>tr:odd")   所有奇数行
       $("table>tbody>tr:even")  所有偶数行

       子找父
       $("tr").parent()

       找兄弟
       $(a).next() 下一个
       $(b).prev() 上一个

分享到:
评论

相关推荐

    jquery基础教程中文版2015

    **jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程,旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...

    jquery的基础用法例子

    以上就是jQuery基础用法的一些关键点,通过学习和实践这些例子,你可以快速上手并高效地利用jQuery进行网页开发。记得在实际项目中灵活运用,并结合个人经验和最佳实践,以提升开发效率和用户体验。

    jquery基础教程第四版源码

    《jQuery基础教程第四版》是一本深受欢迎的前端开发指南,专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了JavaScript操作DOM(文档对象模型)、事件处理、动画制作以及Ajax...

    jQuery基础教程源码

    这个"jQuery基础教程源码"资源包含了与《jQuery基础教程》一书配套的所有实例源代码,旨在帮助读者更好地理解和实践jQuery的核心概念。 在jQuery中,DOM(文档对象模型)操作是其主要功能之一。DOM是HTML和XML文档...

    jQuery基础教程(第四版)中文

    通过阅读《jQuery基础教程(第四版)中文》,读者不仅能掌握jQuery的基本用法,还能了解最佳实践和最新趋势。配合提供的"教程重要说明及更新链接点击这个文本.txt",读者可以获取最新的教学资源和更新信息。"jQuery...

    13jQuery基础使用与样式篇.docx

    **jQuery基础使用与样式** jQuery 是一个广泛使用的 JavaScript 库,它简化了DOM操作、事件处理、动画设计和Ajax交互。在本文中,我们将探讨jQuery的基础使用,特别是关于选择器和样式的应用。 **一、jQuery选择器...

    jQuery基础教程第四版+配套源码

    《jQuery基础教程第四版》是一本专为初学者设计的指南,旨在帮助读者掌握JavaScript库jQuery的核心概念和技术。jQuery简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务,是Web开发中广泛使用的工具。这...

    jQuery基础教程(第四版)中文pdf版+配套源码

    《jQuery基础教程(第四版)中文pdf版+配套源码》是针对JavaScript库jQuery的一份详细学习资源,旨在帮助初学者和进阶开发者掌握jQuery的核心概念和技术。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历...

    jQuery基础教程第5章中文版

    以下是关于jQuery基础教程第5章的一些核心知识点: 1. **选择器**:jQuery的选择器基于CSS,允许开发者轻松地选取DOM中的元素。如`$("#id")`用于选取ID为"id"的元素,`$(".class")`用于选取所有class为"class"的...

    Learning jQuery 1.3 | Jquery基础教程(第二版)

    **jQuery基础教程(第二版)** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的使用,尤其是处理HTML文档、事件处理、动画效果以及AJAX交互。本教程将深入探讨jQuery的核心概念和功能,...

    jQuery基础文件

    此“jQuery基础文件”压缩包包含了jQuery的三个主要版本:1.11.3,2.1.4和3.3.1。每个版本都有其特定的发布日期和功能特性,适合不同项目的需求。 1. jQuery 1.11.3: 这是jQuery 1.x系列的一个稳定版本,主要支持...

    jQuery基础教程(第二版)源码

    《jQuery基础教程(第二版)源码》是一个用于学习jQuery库的配套资源,包含了多个章节的实例代码。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个教程源码...

    jquery基础教程(第四版)

    - **示例插件**:通过实例演示如何编写自定义插件,包括插件的基本结构、配置选项和使用方法。 #### 七、高级技术探讨 - **闭包的使用**:解释闭包的概念,并展示如何在jQuery中有效利用闭包。 - **单元测试**:...

    jQuery基础教程源码 第三版

    "jQuery基础教程源码 第三版"是一本旨在帮助初学者和有经验的开发者深入了解jQuery的著作。在这个版本中,作者深入浅出地介绍了jQuery的核心概念、方法和最佳实践,通过实例代码帮助读者更好地理解和应用jQuery。 ...

    JQuery基础教程 英文原版

    ### JQuery基础教程知识点详解 #### 一、JQuery简介与特点 **JQuery** 是一个快速、简洁的JavaScript库,其设计目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等操作。通过JQuery,开发者可以更方便地编写...

    jQuery基础教程.pdf

    因此,我将根据文件的标题“jQuery基础教程.pdf”来生成关于jQuery基础的知识点。jQuery是一个快速、小巧、功能丰富的JavaScript库。它简化了HTML文档遍历、事件处理、动画和Ajax交互的过程,极大地提高了Web开发的...

    jquery基础教程6章

    这一章介绍了jQuery的基本使用方法,包括如何在网页中引入jQuery库,以及如何编写jQuery选择器来选取页面元素。它还会讲解如何使用$函数进行DOM元素的选择和操作,例如通过ID、类名或标签名选取元素,并展示如何利用...

    jquery基础教程第四版+附带源码

    **jQuery基础教程第四版**是针对初学者设计的一本深入浅出的指南,它全面讲解了jQuery库的核心概念和实用技巧。jQuery是一个广泛使用的JavaScript库,它的主要目标是简化HTML文档遍历、事件处理、动画制作和Ajax交互...

Global site tag (gtag.js) - Google Analytics