jQuery-初识-操作(章节一)

二、jQuery对象

1.jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的 :

用原生 JS 获取来的对象就是 DOM 对象

jQuery 方法获取的元素就是 jQuery 对象。

jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

示例

语法:$(“h1”);

//返回的对象并不是原生的dom对象，而是jquery封装的dom对象，但是可以通过索引值获取原生的dom对象

2. jQuery 对象和 DOM 对象相互转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

// 1.DOM对象转换成jQuery对象，方法只有一种

var d1 = document.querySelector(“#d1”); // 获取DOM对象

var jQobj = $(d1);// 把DOM对象转换为 jQuery 对象

//可以简写为

$(“#d1”)

// 2.jQuery 对象转换为 DOM 对象有两种方法：

// 2.1 jQuery对象[索引值]

var domObject1 = $(‘div’)[0]

// 2.2 jQuery对象.get(索引值)

var domObject2 = $(‘div’).get(0)

示例：DOM对象转换成jQuery对象

示例：jQuery 对象转换为 DOM 对象

示例：相互转化

//jquery对象转化为原生对象

var a = $(“h1”)[0];

console.log(a)

//封装为jquery对象

console.log( jQuery(a));

实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

三、jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

jquery筛选选择器手册

1.基础选择器

$(“选择器”)//里面选择器直接写 CSS 选择器即可，但是要加引号

2.层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器

3.筛选选择器

常见如下：

示例： eq()

$(“h1”).eq(5).css(“background”,“orange”);

$(“h1:eq(5)”).css(“color”,“#fff”);

//给索引值为5的标签设置背景颜色

内容1

内容2

内容3

内容4

内容5

内容6

内容7

内容8

内容9

内容10

行1

行2

行3

行4

行5

行6

行7

行8

行9

行10

示例：children(),find(),siblings()

var li = d1.find(“li”);

var child = d1.children(“ol”);

var brother = d1.find(“li”).eq(3).siblings().css(“background”,“pink”);

//给li的第三个索引值的所有兄弟标签设置属性，不包含他本身

• 有序列表
• 有序列表
• 有序列表
• 有序列表
• 有序列表
• 有序列表
• 有序列表
• 有序列表
• 有序列表
• 有序子列表
• 有序子列表
• 有序子列表
• 有序子列表
• 有序子列表

• 示例：odd(),even()

  //奇数

  $(“ul li:odd”).css(“backgroundColor”, “skyblue”);

  //偶数

  $(“ul li:even”).css(“backgroundColor”, “pink”);
• 1
• 2
• 3
• 4
• 5

• 

  案例

  头条新闻

  娱乐新闻

  周边新闻

  1sasdxsaascascsdsa
  2sadsaxdsaxsadxa
  3asdsaxasxdasdxsaxd

  

  四、jquery的属性操作

  html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

  DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

  类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

  值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

  1.jquery操作样式

  jQuery中常用的样式操作有两种：css() 和 设置类样式方法

  1.css() 和 设置类样式

  // 1.参数只写属性名，则是返回属性值

  var color = $(this).css(‘color’);

  // 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

  $(this).css(‘‘color’’, ‘‘pink’’);

  // 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号

  $(this).css({ “color”:“pink”,

  “font-size”:“20px”

  });

  //css() 多用于样式少时操作，多了则不太方便。

  2.设置类样式

  // 1.添加类

  $(“div”).addClass(“active”);

  // 2.删除类

  $(“div”).removeClass(“active”);

  // 3.切换类

  $(“div”).toggleClass(“active”);

  示例：css 方法

  怦然心动如往昔，笑颜灿烂如春天。静看光阴荏苒，喑哑无言

  2.类方法设置样式

  示例：类方法

  切换显示

  addClass(),removeClass(),toggleClass()

  $(‘div’).addClass(“box”);//追加一个类名到原有的类名

  $(‘div’).addClass(“box box2”);//追加多个类名

  $(‘div’).removeClass(‘box’)；移除指定的类（一个或多个）

  $(‘div’).removeClass(); 移除全部的类

  $(this).toggleClass(‘active’)

  //如果存在（不存在）就删除（添加）一个类

  原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

  2.html属性操作

  attr()

  获取：

  $(‘div’).attr(‘id’)

  设置

  $(‘div’).attr(‘class’,‘box’)

  设置多个值，键值对存储

  $(‘div’).attr({name:‘hahaha’,class:‘happy’})

  removeAttr()

  //删除单个属性

  $(‘#box’).removeAttr(‘name’);

  $(‘#box’).removeAttr(‘class’);

  //删除多个属性

  $(‘#box’).removeAttr(‘name class’);

  3.DOM属性操作

  prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时，则返回第一个匹配元素的值。当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

  注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

  返回属性的值

  $(selector).prop(property)

  设置属性和值

  $(selector).prop(property,value)

  设置多个属性和值

  $(selector).prop({property:value, property:value,…})

  //在使用单双选框的时候

  //使用attr获取checked的值

  console.log($(‘input’).eq(0).attr(‘checked’));

  //使用prop获取checked的值

  console.log($(‘input’).eq(0).prop(‘checked’));

  这里是引用

  4.值操作

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

  返回属性的值

  $(selector).prop(property)

  设置属性和值

  $(selector).prop(property,value)

  设置多个属性和值

  $(selector).prop({property:value, property:value,…})

  //在使用单双选框的时候

  //使用attr获取checked的值

  console.log($(‘input’).eq(0).attr(‘checked’));

  //使用prop获取checked的值

  console.log($(‘input’).eq(0).prop(‘checked’));

  这里是引用

  4.值操作

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-Ij69d8HP-1715535996749)]

  [外链图片转存中…(img-tF11uk6p-1715535996750)]

  [外链图片转存中…(img-vT7Kl9Ee-1715535996750)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！