jQuery基础

Author Avatar
Roojay 11月 11, 2017
  • 在其它设备中阅读本文章

CDN 方式引入 jQuery

选择器操作 DOM 节点

  • $(“选择器”); 可以通过选择器选择 DOM 节点
  • jQuery(“h1”); 等同于 $(“h1”); 返回 h1
  • $(“h1”).text(); 返回 h1 里面的 text
  • $(“h1”).text(“Hello World!”) 更改覆盖 h1 的内容

注意DOM 加载完成之后 jQuery 开始运行,否则 jQuery 操作会被覆盖,不会生效。

// 文档加载完成后执行替换方法
jQuery(document).ready(function(){
    $("h1").text("Hello World!);
});
// 或者使用以下方法
$(document).ready(function(){
    $("h1").text("Hello World!);
});

伪类选择器

.class li:first; // 选择列表里面的第一个元素
.class li:last; // 选择列表里面的最后一个元素
.class li:odd; // 选择列表里面的奇数位元素
.class li:even; // 选择列表里面的偶数位元素

遍历寻找操作 DOM 节点

速度快于选择器操作

$(".class").find("li");

遍历伪类选择

$(".class").first(); // 选择列表第一个元素
$(".class").last(); // 选择列表最后一个元素
$(".class").odd(); // 选择列表奇数位元素
$(".class").even(); // 选择列表偶数位元素

上下遍历

$(".class").parent("li"); // 向上一层遍历,得到直系父元素
$(".class").children("li"); // 向下遍历,得到直系子元素

The MIT License (MIT)
Copyright (c) 2019, Roojay.

本文链接:https://roojay.com/pages/889563/