配置jQuery环境

下载jQuery    官网：jquery.com

学习或开发建议选择未压缩版，便于学习，发布建议选择压缩版，便于用户极速体验（点击下载若出现的是代码页

面，Ctrl+A全选复制到 js 文件中，注意：不要让浏览器翻译代码页面，否则粘贴时编译器会显示报错）

在代码中引入jQuery文件

以上就配置成功了

jQuery语法结构

语法：

　　$(selector).action();

　　$(selector).action();这三大部分在jQuery中分别被称为工厂函数、选择器和方法

1、工厂函数  $()

　　在jQuery中，美元符号 “$” 等价于 jQuery, 即 $()=jQuery()。$()的作用是将DOM对象转化为jQuery对象，只有

DOM对象转化为jQuery对象后才能使用jQuery方法

2、选择器  selector

　　jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器，如标签选择器、类选择器、ID选择器和后代选择器等

语法：

　　$(selector)

　　ID选择器、类选择器和标签选择器的用法如下所示

$("#userName");         //获取DOM中id为userName的元素
$("div");               //获取DOM中标签名为div的元素
$(".content");          //获取DOM中class为content的元素

当然，jQuery中提供的选择器远不止以上几种，还有很多

3、方法  action()

　　jQuery中提供了一系列方法，在这些方法中，一类重要的方法就是事件处理方法，主要用来绑定DOM元素的

时间和事件处理方法

实例代码：

<input type="button" value="开灯" id="btn" />

<script src="js/jquery-1.6.4.js"></script>
<script>
    $("#btn").click(function (){
        alert('欢迎学习jQuery');
    });
</script>

以上代码，click()就是一个单机事件，绑定了id为btn的元素上，当用户点击 “开灯" 按钮时，就会弹出一个消息框 “欢迎学习jQuery”

　　

jQuery对象与DOM对象的互相转换

实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM对象与jQuery对象的互相转换</title>
    </head>
    <body>
        <div id="Kong"></div>

        <script src="../js/jquery-1.6.4.js"></script>
        <script>

            var back = document.getElementById("Kong");

            //将DOM对象转为jQuery对象
            $(back).css({
                "width": "300px",
                "height": "300px",
                "background-color": "red"
            });

            //将jQuery对象转为DOM对象
            var obj = $(back).get(0);
            var obj1 = $(back)[0];
            alert(obj === obj1);    //返回true
        </script>
    </body>
</html>

01 jQuery配置、jQuery语法结构、jQuery对象与DOM对象的互相转换的更多相关文章

  1. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  2. jQuery对象与DOM对象

    jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...

  3. jQuery对象和dom对象的辨析和相互转化

    jquery对象和dom对象总是让人感觉很难分清,其实只要做到1对两者概念有明确认识2找出不同点 A DOM 1概念 DOM对象(Document Object Model,文档对象模型)可以把htm ...

  4. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  5. jQuery对象与DOM对象的相互转化

    jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素,他们都是可以操作的DOM元素. 一.jQuery对象转化为DOM对象 有以下两种方法: 方法一:利用数组下标的方式读取jQuery中的 ...

  6. jQuery 对象和 DOM 对象

    jQuery(DOM对象) 或者 $(DOM对象) 此函数的作用是将DOM对象,转换为jQuery的对象 DOM对象其实就是javascript的函数对象,可以用来操作所有HTML元素.比如: a标签 ...

  7. jQuery对象和DOM对象之间的转换

    jQuery对象不能使用DOM对象的任何方法,DOM对象也不能使用jQuery对象的任何方法.在需要使用时需要对其进行转换. jQuery对象前使用"$",这不是必须的,不这么使用 ...

  8. 判断一个对象是jQuery对象还是DOM对象

    今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...

  9. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

随机推荐

  1. 死磕 java线程系列之线程池深入解析——未来任务执行流程

    (手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本. 注:线程池源码部分如无特殊说明均指ThreadPoolExecutor类. 简介 前面我们一起学习了线程池中普 ...

  2. xtrabackup备份原理及流式备份应用

    目录 xtrabackup备份原理及流式备份应用 0. 参考文献 1. xtrabackup 安装 2. xtrabackup 备份和恢复原理 2.1 备份阶段(backup) 2.2 准备阶段(pr ...

  3. Web for pentester_writeup之XML attacks篇

    Web for pentester_writeup之XML attacks篇 XML attacks(XML攻击) Example 1 - XML外部实体注入(XXE) Payload http:// ...

  4. NOI1995 石子合并 [Luogu P1880]

    一道区间dp的模板题,这里主要记一下dp时环形数据的处理. 简略版:方法一:枚举分开的位置,将圈化为链,因此要做n次. 方法二:将链重复两次,即做一个2n-1长度的链,其中第i(i<=n)堆石子 ...

  5. NOIP模拟21+22

    模拟21确实毒瘤...考场上硬刚T3 2.5h,成功爆零 T1.数论 看这题目就让人不想做,考场上我比较明智的打完暴力就弃掉了,没有打很久的表然后找规律. 正解貌似是乱搞,我们考虑一个比较显然的结论: ...

  6. 基于cookie的用户登录状态管理

    cookie是什么 先来花5分钟看完这篇文章:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies 看完上文,相信大家对cookie已经有 ...

  7. RPA - UiPath简明教程 ║ .NET的又一领域

    RPA概念 RPA全称为:Robotic Process Automation,即机器人流程自动化. Robotic:这里的机器人是一个虚拟的概念,并不是需要一个实体的机器人,它只是流程的执行体,或者 ...

  8. layui多级弹框去掉遮罩

    var index = layer.open({ type:1, title:'请选择费用代码', area:['1050px','650px'], content:$('#selectFee'), ...

  9. Groovy单元测试框架spock数据驱动Demo

    spock是一款全能型的单元测试框架. 上次文章分享了spock框架的基础功能的使用,在此基础上,我根据自己写的Groovy的封装方法.数据驱动以及一些Groovy的高级语法做了一些尝试.发现还是有一 ...

  10. 【algo&ds】1.时间复杂度和空间复杂度分析

    1.时间复杂度分析O(f(n)) 分析方法 只关注循环执行次数最多的一段代码 加法原则 乘法原则 高优先级原则 常见时间复杂度量级 多项式量级和非多项式量级.其中,非多项式量级只有两个:O(2^n) ...