配置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. Cookie 、session、token都是什么?

    1.Cookie 起源:1993年,网景浏览器的员工为了让用户访问某网站时,进一步提高访问速度,实现个人化网络发明了cookie.(看来有时候的偷懒会促进社会的进步啊~,就像人们不想做饭就诞生了外卖) ...

  2. 在SpringBoot中使用flyway进行数据库版本管理

    本文大纲 flyway是什么 能帮助我们解决什么问题 springboot环境下使用flyway flyway的工作原理 一.flyway是什么 Flyway是一个开源的数据库版本管理工具,并且极力主 ...

  3. FTP上传、下载文件Demo

    前言:最近在做一个app,负责写后台接口,客户那边给了一个FTP的账号密码过来,服务器上面放了一堆的PDF文件,让我们这边自己从上面拿,项目是spriongboot的,做个记录供以后参考. 一.app ...

  4. vim编辑器介绍

    所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是 vim 编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的正 ...

  5. 2019.NET Conf China(中国.NET开发者峰会)活动全纪录:.NET技术之崛起,已势不可挡

    一.微软走向开放与.NET Core的诞生 当今时代,气象更新,技术飞速发展. 当今时代,开发者大概是最优秀的群体.每一位开发者,无不奋勇向前,努力追寻时代的步伐,以大无畏的精神迎接挑战,紧跟大时代成 ...

  6. SpringBoot之ActiveMQ实现延迟消息

    一.安装activeMQ ​ 安装步骤参照网上教程,本文不做介绍 二.修改activeMQ配置文件 ​ broker新增配置信息 schedulerSupport="true" & ...

  7. Asp.Net终于可以在龙芯服务器上运行啦:Jexus成功完成对国产系列CPU的适配

    为了确保我国信息化建设“安全可靠”,使用国产关键系统.关键应用.关键软硬件替代国外信息技术产品,已经在党政部门.国营企事业单位得到了进一步落实.过去运行于 Windows 服务器的 Web 应用程序, ...

  8. Python Socket学习之旅(二)

    Socket函数 注解: Socket的close和shutdown--结束数据传输: close-----关闭本进程的socket id,但链接还是开着的,用这个socket id的其它进程还能用这 ...

  9. 文件输入输出函数fgetc/fputc及fgets/fputs等文件指针位置的变化

    文件打开后才可以对文件进行操作.也就是说,文件必须经历打开-操作-关闭的过程.如前所述,C语言对文件的操作都是通过调用标准I/O库函数来实现的.文件操作实际是指对文件的读写.文件的读操作就是从文件中读 ...

  10. 小白学 Python(22):time 和 calendar 模块简单使用

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...