时间戳

首页 > 技术文章 > JavaScript: jQuery基本知识

JavaScript: jQuery基本知识

darthbadwolf 2017-08-08 16:02 原文

jQuery是一个在页面中引用的JavaScript文件, 它允许通过css样式选择器来找到一些元素, 并且在这些元素上使用jQuery提供的一些方法.

 

  • 使用css样式选择器查找元素
$('li .hot');
  • 使用jQuery方法来操作元素
$('li .hot').addClass('complete');

谈及变量或对象中保存了什么东西的引用, 是指保存的是浏览器内存中此信息的位置.

当jQuery选取元素时, 保存DOM树中响应节点的引用, 并不会复制这些节点. jQuery对象会保存对元素的引用, 把jQuery对象缓存在变量中, 变量中就包含了对元素的引用.

$('li');
//创建了一个jQuery对象, 其中保存了DOM树中<li>元素的位置

$listItem = $('li');
//这个对象的引用这次被保存在变量$listItem中

*注意当变量包含一个jQuery对象时, 通常都会在变量名前加一个$符号, 用来区别其他变量.

 

循环

在普通的JavaScript中, 如果需要对多个元素进行同样的操作, 就需要写一个循环来遍历选中的所有元素.

在jQuery中, 当选择器返回了多个元素时, 可以使用一个方法来更新所有元素.

当需要从一组元素回去信息时, 可以使用.each()方法.

 

链式操作

在统一选取结果上处理多个方法的技术, 即链式操作

 

检测页面是否已经可用

jQuery.ready()方法用于检测页面是否已经准备好让代码进行操作

$(document).ready(function(){
    //script goes here
});

$(document)创建一个jQuery对象来表示当前页面.

也可以使用简写:

$(function(){
    //script goes here
    ...
});

这个事件时再DOM加载完成后立刻出发, 不会等待其他资源加载完成. 如果需要所有资源加载完后再出发, 可以使用jQuery的.load()方法.

 

使用函数更新内容

$('li .hot').html(function(){
    return '<em>' + $(this).text() + '</em>';
});

this指向当前的列表项, $(this)将钙元素转换为一个新的jQuery对象, 然后可以在其上使用jQuery方法.

 

插入元素

使用jQuery插入元素有两个步骤:

1. 将新元素创建为jQuery对象

创建变量$newFragment 保存了一个jQuery对象, 该对象中包含了一个空的<li>元素

var $newFragment = $('<li>');

2. 使用一个方法将内容插入到页面中

向页面添加一个新元素. 可以使用 .before()   .after()   .prepand()   .append() 四种方法

区别

<li>item</li>

.before()方法把内容插入到<li>元素前面

.after()方法把内容插入到</li>元素后面

.prepand()方法把内容插入到item元素前, <li>元素后

.append()方法把内容插入到item元素后, </li>元素前

 

 

获取和设置元素属性

.attr()  该方法用来读取或设置指定的属性

.removeAttr()

.addClass()

removeClass()

 

获取和设置css属性

$('li').css('padding', '+=20');  //设置单个属性
$('li').css({                    //设置多个属性
    'padding' : '+=40',
    'margin' : '+=60'
})

 

操作选取结果中的每一个元素


通过使用.each()方法, 在选取结果的元素上实现循环功能

使用场景:

  • 获取元素中的每一个元素的信息
  • 在每个元素上执行一系列操作

 

.each()允许在选择器选中的结果中, 在每一个元素上执行一条或多条语句, 就想JavaScript中一样.

该方法使用一个参数: 一个函数, 其中包含需要在每个元素上运行的代码.

$('li').each(function(){
    var ids = this.id;
    $(this).append('<em class = "order" >' + ids + '</em>')
});

 

.each()方法会遍历选取结果中的每一个元素, 因此可以使用this关键字来访问当前元素.

$(this) 使用this关键字创建一个包含当前元素的jQuery对象. 这种方式使得可以在当前元素上使用jQuery方法.

 

事件方法

.on()方法用来处理事件

使用方法:

  1. 使用选择器创建jQuery选取结果
  2. 使用.on()方法制定需要响应哪个事件. 该方法会为选取结果中的每一个元素添加事件监听器.
$('li').on('click', function(){
    $(this).addClass('hot');
});

 

.on()方法处理事件需要两个参数:

  1. 需要响应的事件, 如click
  2. 当匹配结果中的任何一个元素上发生该事件时需要运行的代码. 在这里可以使用实名方法或匿名函数.

 

事件对象

每一个事件处理函数都会得到一个事件对象, 该对象中包含和此事相关的方法和属性.

$('li').on('click', function(){
    eventType = e.type;
});

 

事件处理程序中的其他参数:

.on()方法有两个可选参数, 用来:

  • 在jQuery选取结果中筛选一部分子元素来响应事件
  • 使用对象描述标记处事件处理程序传递额外的信息

 

.on(event[ , selector]①, [ , data], function(e)②);

① 如果需要响应多个事件, 可以使用空格隔开事件名称, 如 .on('click blur')

② 如果要使用事件对象的话, 必须在小括号为其指定名称

*当一个方法中使用了中括号时, 表示这个参数是可选的, 中括号的参数几遍不提供也不会影响方法的正常工作

 

 

 

推荐阅读