JQuery 学习

由于JQuery已经是过时的技术了,所以这篇博客仅仅是为了记录一些简单的操作。

jQuery 如何获取元素

jQuery定位元素的方法有两种

  • 通过jQuery 选择器来选择元素,可以直接获取单个或批量的元素;
  • 通过jQuery 遍历相关来选择元素,这种方法常用在获取层级较复杂的页面中的元素。

常见的选择器有:

1. 元素选择器
通过元素的性质,id,class等获取元素,常见语法为 ("#idName"),(".className"),$("p")等。

2. 元素属性选择器
以元素属性为基准,选择包含该属性或者是该属性值为“XX”的元素,常见语法 ("[ℎ𝑟𝑒𝑓]"),("[href='#']")

3. 元素定位选择器
严格来说这不是选择器的一种,鉴于定位方式较多,将其提取出来。需要结合上述两种选择器使用,适用于在上述两种选择器选择出来元素之后,如果元素数量较多,对元素再进行细化定位。由于这种方式需要先选择出所有同类型元素,再在其中进行选择(过滤),也称为基本过滤器选择器。如定位页面中第三个p元素,需要先使用元素选择器选出页面中的p元素,再根据索引查找 $("p:eq(2)") ,即过滤索引非第三的元素。

Query 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

1. 层级选择器:
我们可以把文档中的所有的节点节点之间的关系,用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。 

a)  >(大于号)紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 
b) +(加号) 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 
c) ~ (波浪线)任意距离兄弟关系 如$("div + p")表示选择div同层的p节点。

2. 子元素过滤器
对子元素进行选择(过滤),用法同 1.3 元素定位(基本过滤器)选择器

jQuery 的链式操作是怎样的

jQuery的链式操作,就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

$('div').find('h3').eq(2).html('Hello');

可以分解为
$('div') //找到div元素
   .find('h3') //选择其中的h3元素
   .eq(2) //选择第3个h3元素
   .html('Hello'); //将它的内容改为Hello

jQuery 如何创建元素

创建新元素的方法非常简单,只要把新元素直接传入jQuery的构造函数就行了

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

jQuery 如何移动元素

jQuery设计思想之五,就是提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。

假定我们选中了一个div元素,需要把它移动到p元素后面。

  • 第一种方法是使用.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter($('p'));
  • 第二种是使用.after(),把p元素加到div元素前面
$('p').after($('div'));

jQuery 如何修改元素的属性

jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.jQuery获取元素 : $(选择器) 代码实现: 2.jQuery链式操作 分解开来就是 代码实现: 3.j...
    RickyWu585阅读 1,222评论 0 0
  • 为甚嚒要学习jQuery? 因为JS中有很多痛点: window.onload事件只能出现一次,如果出现多次,后面...
    magic_pill阅读 4,262评论 0 13
  • 基本选择器 $("#id"):id选择器,返回单个元素 $(".class"):class选择器,返回集合元素 $...
    冯九岁阅读 1,865评论 0 0
  • 1. 向页面添加库<script>标签放在<head>标签内 2. 语法 2.1. $(selector).act...
    Joanne_Tang阅读 1,287评论 0 0
  • 学习 jquery 简介 什么是 jquerye jquery 安装 加载运行函数 jQuery 的入口函数是在 ...
    栀璃鸢年_49a3阅读 3,624评论 0 0