jQuery就是对原生js二次封装的工具类（在jq叫构造函数）

jQuery就是一堆方法的集合，jq对象就可以直接调用这些方法来完成指定的需求

使用jq的流程：

1、在HTML页面倒入jq.js文件

2、获取唯一jq对象

3、通过该对象完成具体的事

jq的使用

jq的官网：https://jquery.com/

下载安装：点击这个下载

（production是生产者版本是看不到源码的，已经打包好的）

（development是开发者版本可以看到源码，）

如何下载jq

1、新建一个文件夹 Directory（自己名命名）

2、新建一个javaScript文件，使用开发者版本，点击开发者版本后复制源码，黏贴入这个jq.js文件内  /  使用生产者版本，点开生产者版本后复制源码，黏贴入jq.min.js文件内（命名的时候min表示压缩版本，就是生产者版本）

PS：压缩版本只有两行，第一行是基本信息，第二行是所有的压缩代码，不能手动去修改，必须通过指定的工具去处理

PS：查看源码，为什么源码中都是window.jQuery， 因为window就是顶级对象（和python中类中的object一样），是代表浏览器打开的整个窗口，也是浏览器自身,所有人都属于window所以window可以省略

PS： $ 就代表jQuery,为什么能代表jQuery，因为本质上$在底层源码中就是window.$，

PS：唯一的jQuery对象我们就是 $ 来表示

jq的基本操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq初识</title>
</head>
<body>
    <div class="box">box</div>
    <div class="box">box1</div>
</body>
<!--1、页面中导入jq-->
<script src="js/jq.js"></script>
<script>
    //在jQuery中通过选择器获取标签的值
    console.log($('.box')); //这里获取到的是jQuery对象

    //获取到的值保存下来，放入一个变量
    var $box = $('.box');
    console.log('这里是保存好的jq对象',$box);
    //PS:有时候可以看到var $box = $('.box),创建变量名的前面加$就表示这个变量属兔jQ变量，通常都喜欢在变量名前加$
    var box = document.querySelector('.box');  //这个属于js对象，使用js方法

    //js与jq对象相互转换
    //jq转成js，通过数组的索引来转换，js转成jq，将js对象用$包裹起来
    console.log(box,$(box),$(box)[0]); //第一个是js对象，第二个是jq对象，第三个通过索引取值后jq对象变成了js对象

    //$box 存放着页面两个box的jq对象，如何获取第一个box对应的jq对象
    console.log('这里查看',$box.eq(0));  //通过eq（index）索引的方式获得的还是jq对象

    //通过对象完成具体的业务逻辑,比如点击事件,而且区分标签
    // .box代表页面中所有的类名为box的标签，这些标签全部拥有点击弹窗
    $box.click(function () {
        alert($(this).index())  //this代表的是自己的js对象 => $(this) 当前被点击的对象
    })

</script>
</html>

（17）什么是jQuery（jq的流程和基本操作）的更多相关文章

  1. jQuery validate运作流程以及重复提示错误问题

    一,运作流程 jQuery validate要想运作,首先要加载相应的js <script type="text/javascript" src="/js/clas ...

  2. Ubuntu 17.04 搭建LAMP服务器环境流程

    安装Apache2 安装代码 sudo apt-get install apache2 更改默认目录 sudo vim /etc/apache2/apache2.conf // 将 <Direc ...

  3. <day005>jQuery事件、文档基本操作 + 点赞事件

    任务1: jQuery的基本操作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  4. 2018/3/4 Activiti教程之对于流程的基本操作以及从发起到完成还有相关注意事项(与Springboot整合版)三

    写教程实在太累了,,,还浪费时间,Activiti教程就写到这好了,不过最近在玩区块链,到时候写几个区块链方面的教程. 这是一些流程的查询与删除api,删除这块,默认是级联删除(加个false参数,就 ...

  5. 25个实用的jQuery技巧和解决方案

    1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;}) ...

  6. 25个实用的jquery技巧

    1. 去除页面的右键菜单   $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse; ...

  7. jQuery插件开发（转）

    jQuery插件开发 - 其实很简单 [前言]jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常 ...

  8. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...

  9. jQuery之jQuery扩展和事件

    一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[data],fn]) 当select下拉 ...

随机推荐

  1. inode占用100%时硬盘无法写入文件故障处理

    故障现象: 分区无法写入文件. 故障分析: 执行df -h命令发现空间占用不到50%,执行df -hi,发现某分区IUse%值为99%,说明innode已经用完,应该是某些目录下存在大量的小文件导致. ...

  2. hdu-2063-过山车（匈牙利算法）

    过山车 Problem Description RPG girls今天和大家一起去游乐场玩,终于可以坐上梦寐以求的过山车了.可是,过山车的每一排只有两个座位,而且还有条不成文的规矩,就是每个女生必须找 ...

  3. Android简易项目--傻瓜式阿拉伯语输入法（Dummy Arabic Input）

    一.应用名称 Android简易项目--傻瓜式阿拉伯语输入法(Dummy Arabic Input) 二.应用图标 三.应用说明 现在通行的阿拉伯语键盘布局并无规律可循,阿拉伯语使用者需要花费较多时间 ...

  4. ７.9 C++ STL算法

    参考:http://www.weixueyuan.net/view/6406.html 总结: STL提供了大量操作容器的算法,这些算法大致可以分为:排序.搜索.集合运算.数值处理和拷贝等,这些算法的 ...

  5. MFC Release版本串口连不上的问题

    项目开发过程中发现Release版本存在连接串口时,第一次开机后,出现连接不上的问题,但在Debug版本下正常:而且只要连接上一次,Release版本就能正常连接: 解决方案: 在串口配置过程中更改为 ...

  6. SQL-40 表中新增一列

    题目描述 存在actor表,包含如下列信息:CREATE TABLE IF NOT EXISTS actor (actor_id smallint(5) NOT NULL PRIMARY KEY,fi ...

  7. SQL-35 对于表actor批量插入如下数据,如果数据已经存在，请忽略，不使用replace操作

    题目描述 对于表actor批量插入如下数据,如果数据已经存在,请忽略,不使用replace操作CREATE TABLE IF NOT EXISTS actor (actor_id smallint(5 ...

  8. 安装google 框架

    使用  root exporer很方便   su cp /sdcard/google/busybox /data/local/tmp chmod 0755 /data/local/tmp/busybo ...

  9. Oracle中sysdba身份和dba角色区别

    sysdba身份登陆可以打开,关闭数据库,创建SPFILE,对数据库进行恢复操作等,而这些是DBA角色无法实现的:sysdba 是系统权限,dba是用户对象权限: sysdba,是管理oracle实例 ...

  10. synchronized(六)

    package com.bjsxt.base.sync006;/** * 锁对象的改变问题 * @author alienware * */public class ChangeLock { priv ...