jQuery基础使用与样式总结

jQuery基础使用与样式总结

开发工具与关键技术：Adobe Dreamweaver JavaScript

作者：李金荣

撰写时间：2020年4月30日

jQuery简介

1.jQuery是一个JavaScript函数库。

 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

 以少量的代码完成更多的功能；

 jQuery库包含以下功能：

   HTML 元素选取

   HTML 元素操作

   CSS 操作

   HTML 事件函数

   JavaScript 特效和动画

   HTML DOM 遍历和修改

   AJAX

   Utilities

 提示： 除此之外，jQuery还提供了大量的插件

2 如何使用jQuery

  jQuery是一个JavaScript脚本库，不需要特别的安装，只需要我们在页面标签内中，

通过

3 jQuery的语法

  jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作

  基础语法：$(selector).action();

  - $美元符号定义jQuery

  - selector 选择符需要查找的元素  支持css1~css3中的主流选择器

  - action() 执行对元素的操作

例如：

    $("p").hide();//表示隐藏所有 
 元素

jQuery对象与DOM对象

1.在JavaScript中的DOM对象

例如：document.getElementById(“box”); - DOM对象

jQuery对象

在JQuery库中，可以通过本身自带的方法获取页面元素的对象叫做JQurey对象

例如：
$(".box");//jQuery对象

2. DOM对象与jQuery对象的区别

• DOM对象是通过原生的JS获取的对象，DOM对象只能使用JS中的方法和属性

• jQuery对象是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。

  jQuery可以使用jQuery库里面的方法，但是不能使用JS中的方法

• JS对象只能调用JS中提供的方法和属性，不能使用jquery中的方法和属性

  • jquery对象只能使用jQuery的方法和属性，不能使用JS提供的方法和属性

    两者不能混用；

  3. jQuery中的$(document).ready()事件同等于js中的window.onload事件；

     不同的是，onload事件只可以在页面出现一次，如果一多个的话，前面的代码会被后面的代码覆盖掉；而jQuery中的ready则不同，它可以在一个页面上出现多次，代码从上到下执行；不会被覆盖

例：3.1.js中：window.οnlοad=function(){

         写入自己的代码；}

3.2.jQuery中：$(document).ready(function(){

写入自己的代码；})

3.3.jQuery中代码可使用链式写法：

如：$("#jqBox").css("width",

“400px”).html(“这是一个jQuery对象”);

  可将多句代码结合为一句代码，代码更简便，

4.通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，

而不需要我们具体知道哪个DOM节点有那些方法，

也不需要关心不同浏览器的兼容性问题，

我们通过jQuery提供的API进行开发，代码也会更加精短。

DOM对象与jQuery对象之间的转换 （JS对象包含 DOM对象）

• jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，

  为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

  我们使用jQuery的同时也能混合JavaScript原生代码一起使用。

  在很多场景中，我们需要jQuery与DOM能够相互的转换，

  它们都是可以操作的DOM元素，jQuery是一个类数组对象，

而DOM对象就是一个单独的DOM元素。

• 相比较jQuery转化成DOM，开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法，

  通过传递不同的参数而产生不同的作用。

  如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

• 通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

  1.DOM对象转换为jQuery对象

  例：var
  box = document.getElementById(“box”);//DOM对象

     $(box);  //转换为jQuery对象
  

  2.jQuery对象转换为一个DOM对象

  var $divs=$(“div”); //jQuery对象 divs中表示包含了所有的$divs元素

  var div=$divs[0]; //div为DOM对象，通过索引获取；

  使用jQuery中的get()方法进行转换，只需要提供一个索引就可以了

  var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象

jQuery选择器

1.jQuery选择器

• 页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。

  • jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。

  • jQuery几乎支持主流的css1~css3选择器的写法，我们从最简单的也是最常用的开始学起:

  2.ID选择器 $("#id");

  • id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。

  • 原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器

  • 注意:id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，

• 将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

  3.class选择器 $(".classname");

  • 类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

  • 同样的jQuery在实现上，对于类选择器，如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的

  4.element元素选择器 $(“标签名称”);

  • 元素选择器，根据给定html标记名称选择所有的元素

• 搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

  5.全选择器
  $("*")

  • 全选择器,也就是 *选择器

  • 在CSS中，经常会在第一行写下这样一段样式

例：*
{padding: 0; margin: 0;}

• 通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档 页面中的元素

  6.层级选择器

  • 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，

  • 可以把文档树当作一个家谱，那么节点与节点之间就会存在父子，兄弟，祖孙的关系了。

  • 选择器中的层级选择器就是用来处理这种关系

    子元素 后代元素 兄弟元素 相邻元素

  • 通过一个列表，对比层级选择器的区别

    选择器 描述

$(“ancestor descendant”) 后代选择器：选择给定的祖先元素的所有后代元素，一个元素的后代可能该元素的一个孩子，孙子，曾孙等

  $("parent > child") 子选择器：parent的直接子元素

  $("prev + next") 相邻兄弟选择器：匹配所有紧接在 prev 元素后的 next 元素

  $("prev ~ siblings")一般兄弟选择器：匹配 prev 元素之后的所有 siblings 元素

Js选择器与jQuery选择器的区别：

Js中

jQuery中

                  注释




 #box


  $(“#box”)


 Id选择器




 .box


  $(“.box”)


  class（类）选择器




  div


  $(“div”)


  元素选择器




   *


  $(“*”)


  全部选择器

.box div

$(“.box div”)


  层级选择器

.box>div

$(“.box>div”)


  直接子选择器

#box+div

$(“#box+div”)


  相邻兄弟选择器

#box~div

$(“#box~div”)


  一般兄弟选择器

jQuery选择器之基本筛选选择器

• 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，

• 为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。

• 筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

  筛选选择器的用法与CSS中的伪元素相似，选择器用冒号":"开头，基本筛选器的描述见jQuery API文档：

选择器

$(":first") 获取匹配第一个元素      例如:$('li:first');

$(":last") 获取匹配的最后个元素    例如:$('li:last');

$(":not(selector)") 去除所有与给定选择器匹配的元素 例如:$("input:not(:checked)")

$(":even")  匹配所有索引值为偶数的元素，从 0 开始计数 例如:$("li:even")

$(":odd")  匹配所有索引值为奇数的元素，从 0 开始计数 例如:$("li:odd")

$(":eq(index)")  匹配一个给定索引值的元素，从 0 开始计数 例如:$("li:eq(1)")

$(":gt(index)")  匹配所有大于给定索引值的元素，从 0 开始计数 例如:$("li:gt(0)")

$(":lt(index)")  匹配所有小于给定索引值的元素，从 0 开始计数 例如:$("li:gt(2)")

$(":header")  匹配如

h1, h2, h3之类的标题元素 例如:$(":header").css(“background”,
“#EEE”);

$(":animated")  匹配所有正在执行动画效果的元素(只有对不在执行动画效果的元素执行一个动画特效)

例如:$(":header").css(“background”,
“#EEE”);

$(":focus")  匹配当前获取焦点的元素。

$(":root")  选择该文档的根元素。在HTML中，文档的根元素，和$(":root")选择的元素一样，

永远是元素。

示例:设置背景颜色为黄色

$(":root").css(“background-color”,“yellow”);

jQuery的属性

每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。

如：在img元素中，src就是元素的特性，用来标记图片的地址

    JavaScript中操作特性的DOM方法主要有3个，

      1.getAttribute()获取特性

      2.setAttribute()设置特性

      3.removeAttribute() 移出特性

在jQuery中操作特性的jQuery方法:

      1.attr() 获取/设置属性

      2.removeAttr() 移出属性

在jQuery中用一个attr()与removeAttr()就可以全部搞定了，

jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()











$(document).ready(function
() {
     var url =
$("#picture").attr("src");     1. 获取元素的src属性
    
$("#picture").attr("alt", "通过jQuery动态改写alt值");  2.修改alt的属性值
              $("#picture").removeAttr("alt");  3. 移出属性alt属性
     $("#box").attr({
"class": "mybox", "index": "1" });  4.同时修改多个属性
        });

例：

attr()与removeAttr()的用法

attr()方法的用法:

   1. $(element).attr("属性名");//获取属性名的属性值

   2. $(element).attr("属性","属性值");//设置属性的属性值

   3. $(element).attr("属性名","函数值");//设置属性的函数值

   4. $(element).attr({"属性名":"属性值","属性名":"属性值"});//给指定元素设置多个属性值

      removeAttr()方法的用法:

   1. $(element).removeAttr("属性名");//移出对应的属性

prop()与removeProp()的用法

prop()方法的用法:

   1. $(element).prop("属性名");//获取属性名的属性值

   2. $(element).prop("属性名","属性值");//设置属性的属性值

   3. $(element).prop("属性名","函数值");//设置属性的函数值

   4. $(element).prop({"属性名":"属性值","属性名":"属性值"});//给指定元素设置多个属性值

注：prop方法中，不能获取自定义属性；

removeProp()方法的用法:

   1. $(element).removeProp("属性名");//移出对应的属性

Attribute和Property的区别

Attribute ：

    - attribute是HTML中就有的，是元素的选项|附加项。

    例如：id、class、title、src、alt、href

    - 值只能为string类型

    - 客户端向HTML元素添加的自定义的属性，推荐称为attribute

Property ：

    - JS DOM中，对象的成员(组成部分)，所以可以用JS DOM对象访问property(用对象访问成员)

    例如：tagName,

nodeName, nodeType, defaultChecked (这几个属性是DOM对象中属性)

    - 值类型多样化：property因为是对象的成员，类型可多样化(boolean, string,

number等)

    - 如果获取DOM对象中的属性，推荐使用property

jQuery属性

动态操作class

     1. $(element).addClass(); - 为每个匹配元素所要增加的一个或多个样式名

     - 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

例： $("#box").addClass(“bgRed”);

• 给div动态的添加bgRed的类，如果添加多个类，则用空格隔开；

    2. $(element).removeClass(); - 每个匹配元素移除的一个或多个用空格隔开的样式名
  
  例：$("#box").removeClass("bgRed");
  

-移出类，如果移出多个类每个类之间用空格隔开

    3. $(element).toggleClass(); - 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类；

例： $("#box").toggleClass(“bgRed”);

• 如果有body中，如果有该类则移出，如果没有则添加该类；

    -
  

JavaScript中通过className属性来动态的操作class类

.html()与.text()方法

    读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，

    JavaScript中提供innerHTML与innerText属性

    jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

$(element).html()方法

    获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容.

    1. $(element).html() 获取element元素的HTML内容

    2.

$(element).html(“htmlString”) 为每一个匹配元素添加html内容

    注：$(element)

.html()方法内部使用的是DOM的innerHTML属性来处理的，

    所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）








获取元素，只会获取所有div集合元素中的第一个元素；
var strhtml
= $("div").html();
设置元素，它会给只要是指定的这个div标签，都会设置上这个p标签元素；
$("div").html("
通过jQuery中的html()方法添加的P标签
");

例：

$(element).text()方法

     得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，

     或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

       1. $(element).text() 获取element元素的文本内容，获取的内容只会是文本的内容，不会获取标签；

       2.

$(element).text(“textString”) 用于设置匹配元素内容的文本，内容中不能添加标签，

因为该方法不能识别标签，如果内容中有标签，它就会把标签当作文本一起输出；

$(element).html()与 $(element).text()之间的差异

   .html与.text的异同:

   .html与.text的方法操作是一样，只是在具体针对处理对象不同

   .html处理的是元素内容，.text处理的是文本内容

   .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用

  如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的

火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

jQuery属性的val()方法

   $(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和

textarea。

JavaScript中的value属性

1. $(ele).val() 获取匹配的元素集合中第一个元素的当前值

2. $(ele).val(value) 设置匹配的元素集合中每个元素的值

通过$(ele).val()处理select元素，当没有选择项被选中，它返回null

$(ele).val()方法多用来设置表单的字段的值

如果select元素有multiple（多选）属性，并且至少一个选择项被选中，

$(ele).val()方法返回一个数组，这个数组包含每个选中选择项的值

例：$(“input[type=‘text’]”).val(“大家好!”); - 给一个文本框添加上输出内容；

jQuery中操作样式的方法

$(element).css()方法

   通过JavaScript获取DOM元素上的style属性，我们可以动态的给元素赋予样式属性。

   在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了:

   $(element).css()方法:获取元素样式属性的计算值或者设置元素的CSS属性

$(element).css()方法使用方法

   1. $(element).css("属性名") //获取匹配元素集合中的第一个元素的样式属性的计算值

   2. $(element).css(["属性名1","属性名2"]) //传递一个数组，返回一个对象结果

   3. $(element).css("属性","属性值") //设置元素的css样式

   4. $(element).css({"属性1":"属性值1","属性2":"属性值2"}) //可以传一个对象，同时设置多个样式，以键值对的方式；

   5.

$(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理

1.2 注意事项

 - 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px

 - 

$(element).css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理

    当一个数只被作为值（value）的时候，jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，

      例如

.css(“width”,50}) 与
.css(“width”,“50px”})一样

    parseFloat()方法，将字符串转换成浮数点，

jQuery给元素添加点击事件；

$(".box").click(function
() {
1.var width =
$(".box").css("width"); 
点击box元素获取宽度值；
2.var styleObj =
$(this).css(["width", "height"]); 以数组的形式，返回一个对象
3.$(".box").css("backgroundColor",
"green");  给box元素设置css样式
传入对象，设置多个样式，每个样式用逗号分隔；
4. $(".box").css({
"color": "#fff", "font-size": 20});        
}；

例：

• width();

• height();

• 这两个方法仅获取内容区的高度和宽度；或设置内容区的高度和宽度；（内容区）

• innerWidth();

• innerHeight();

• 获取内部区域加内边距的高度和宽度；或设置内容区加内边距的高度和宽度；(不包括边框)；（内 容区+内边距）

• outerWidth();

• outerHeight();

• 获取元素外部的高度和宽度；或设置内容区加内边距的高度和宽度

；(包括边框，内边距)；（全部）