CRainyDay

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的神奇之处: 有非常多的、非常有用的选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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() 删除指定元素的指定属性

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有