jQuery简介

crainyday

前端 / jQuery

发布于：2019年4月22日

字数：734字

时长：3分钟

jQuery------write less, do more

一.jQuery简介

为了简化JS开发, 出现了一些JS库. 这些库封装了很多预定义的对象和实用函数. 能帮助使用者建立有高难度交互的Web 2.0特性的富客户端页面, 并兼容大部分浏览器.

常见的JS库: prototype、dojo、Ext JS、mootools、jQuery

jQuery是继prototype之后又一个优秀的JS库

jQuery理念: 写的少, 做的多. 优点:

轻量级

强大的选择器

出色的DOM操作封装

可靠的事件处理机制

完善的Ajax

出色的浏览器兼容性

链式操作方式
…

二.jQuery的Hello World

应用jQuery, 第一步就是引入jQuery库

jQuery的 $(function(){}) 就相当于 JS 的window.onload

jQuery的神奇之处: 有非常多的、非常有用的选择器

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--1.必须引入jQuery库-->
    <script src="js/jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //1.选取btn按钮
            //2.为id为btn添加onclick响应函数
            $("#btn").click(function(){
                //3.弹出Hello World!
                alert("Hello World!");
            });
        });
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>

三.jQuery对象

jQuery对象就是通过jQuery的 $() 包装的DOM对象后产生的对象

jQuery对象是jQuery特有的. jQuery对象可以使用jQuery里的方法, 例: $("#box").html()

jQuery对象无法使用DOM对象的任何方法, 同样DOM对象无法使用jQuery对象里的任何方法

约定: 若获取的对象为jQuery对象, 在变量面前加上$表示.例: var $variable = jQuery对象;
var variable = DOM对象;

1.jQuery对象—>DOM对象

jQuery对象不能用DOM中的方法, 但若jQuery没有封装想要的方法, 不得不用DOM中的方法时, 要将jQUery对象转化为DOM对象.

①jQuery对象是一个数组对象, 可以通过[index]的方法的到对应的DOM对象.
var $cr = $("#cr");
var cr = $cr[0];

②使用jQuery中的get(index)方法得到相应的DOM对象
var $cr = $("#cr");
var cr = $cr.get(0);

2.DOM对象—>jQuery对象

对于一个DOM对象, 只需要用 $() 把DOM对象包装起来, 就可以得到一个jQuery对象, 之后就可以用jQuery对象的方法.

var cr = document.getElementById(“cr”);
var $cr = $(cr);

四.jQuery对象的几个常用方法

方法	描述
val([value])	获取或设置表单元素的value属性值
attr(name[,val])	获取或设置元素节点的指定属性值
each()	对jQuery对象进行遍历,其参数为function,函数内部this代表当前DOM对象
text([str])	获取或设置元素节点的文本节点的值
html([str])	获取或设置元素的内部html代码
height()	设置元素CSS的高度
width()	设置元素CSS的宽度
css(attr,val)	设置元素指定属性(attr)的值为val
removeAttr()	删除指定元素的指定属性