Jquery对象、Jquery选择器、Jquery Dom操作及事件

目录

一、Jquery的下载与安装

1.下载及其版本

2.安装

3.优点

二、Jquery核心

三、DOM对象与Jquery包装集对象

1.DOM对象

2.Jquery包装集对象

3.DOM对象转jQuery对象

4.jQuery对象转DOM对象

四、jQuery选择器

1.基础选择器

2.层次选择器 

3.表单选择器

五、jQuery Dom操作

1.操作元素的属性

  (1).获取属性  ​

  (2).设置属性

  (3).移除属性

2.操作元素的样式

3.操作元素的内容

4.创建元素

5.添加元素

 (1).前追加子元素

(2).后追加子元素

(3).前追加同级元素

(4).后追加同级元素

6.删除元素

7.遍历元素 

六、jQuery事件 

1.ready()加载事件

2.bind()绑定事件

 (1).绑定单个事件

(2).绑定多个事件


        jQuery 是一套兼容多浏览器的 javascript 脚本库。核心理念是写得更少,做得更多,使用 jQuery 将极大的提高编写 javascript代码的效率,帮助开发者节省了大量的工作,让写出来的代码更加优雅,更加健壮,“如虎添翼”。同时网络上丰富的 jQuery 插件也让我们的工作变成了“有了 jQuery,一切 so easy。”

        jQuery 在 2006 年1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。如今,jQuery已经成为最流行的 javascript 框架,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery。

一、Jquery的下载与安装

1.下载及其版本

有两个版本的 jQuery 可供下载:

  • Production version - 用于实际的网站中,已被精简和压缩。
  • Development version - 用于测试和开发(未压缩,是可读的代码)

这两个版本都可以从 jQuery.com 下载。

 

2.安装

在页面中引入:



如果不想下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

谷歌和微软的服务器都存有 jQuery 。



或:



 

3.优点

(1).提供了强大的功能函数

(2).解决了浏览器兼容性问题

(3).实现丰富的UI和插件

(4).纠正错误的脚本知识

二、Jquery核心

        $符号在jQuery中代表对jQuery对象的引用,“jQuery”是核心对象。

        通过该对象可以获取jQuery对象,调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

三、DOM对象与Jquery包装集对象

        原始的DOM对象只有DOM接口提供的方法和属性,通过JS代码获取的对象都是DOM对象。而通过jquery获取的对象是jquery包装集对象,简称jquery对象。只有jquery对象才能使用jquery提供的方法。

1.DOM对象

        JavaScript中获取DOM对象,DOM对象只有有限的属性和方法:

    let div = document.getElementById("testDiv")
    let div = document.getElementsByTagName("div")[0]

2.Jquery包装集对象

        可以说是DOM对象的扩充。在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取一个包含元素的jQuery包装集:

    let jqueryObject = $("#testDiv")
    let j = jqueryObject[0]

3.DOM对象转jQuery对象

        DOM对象转为jQuery对象,只需要利用$()方法进行包装即可

    let div = document.getElementById("testDiv")
    let jqueryDiv = $(div)

4.jQuery对象转DOM对象

        jQuery对象转DOM对象,只需要取元素中的数组即可

//第一种方式 获取jQuery对象
let jqueryDiv = jQuery("#testDiv")
//第二种方式 获取jQuery对象
jqueryDiv = $("testDiv")

//将已经获取的jQuery对象转为DOM对象
let dom = jqueryDiv[0]

        通过遍历jQuery对象数组得到的对象是DOM对象,可以通过$()转为jQuery对象

四、jQuery选择器

        和使用js操作Dom一样,获取文档中的节点对象是很频繁的一个操作,在iQuery中提供了简便的方式供我们查找定位元素,称为jQuery选择器,通俗的讲,Selector 选择器就是“一个表示特殊语意的字符串”。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以jQuery 包装集的形式返回。

        jQuery 选择器按照功能主要分为“选择”和“过滤”。并且是配合使用的,具体分类如下。

 

1.基础选择器

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第1张图片

 id选择器中,如果有多个同名id,以第一个为准

2.层次选择器 

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第2张图片

 

3.表单选择器

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第3张图片

 

五、jQuery Dom操作

        jQuery也提供了对HTML节点的操作,而且在原生JS的基础之上进行了优化,使用起来更加方便。

        常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。

1.操作元素的属性

  (1).获取属性  Jquery对象、Jquery选择器、Jquery Dom操作及事件_第4张图片

 属性的分类:

  • 固有属性:元素本身就有的属性(id、name、class、style)
  • 返回值是Boolean的属性:checked、selected、disabled
  • 自定义属性:用户自己定义的属性

attr与prop的区别:

  • 如果是固有属性,attr()和prop()方法均可获取
  • 如果是自定义属性,attr()可获取,prop()不可获取
  • 如果是返回值为Boolean类型的属性,若设置了属性,attr()返回具体的值,prop()返回true;若未设置属性,attr()返回undefined,prop()返回false
    aa
    bb
    

 

  (2).设置属性

         attr("属性名","属性值")

        prop("属性名","属性值")

//固有属性
$("#aa").attr("value","1")
$("#bb").attr("value","3")
//返回值是Boolean的属性
$("#bb").attr("checked","checked")
$("#bb").prop("checked",false)
//自定义属性
$("#aa").attr("uname","admin")
//$("#aa").prop("uage",18)   //prop获取不到自定义属性 

 

  (3).移除属性

         removeAttr("属性名")

$("#aa").removeAttr("checked")

 

2.操作元素的样式

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第5张图片

css():
        设置单个样式:css("具体样式名","样式值") 

        设置多个样式:css("具体样式名":"样式值";"具体样式名":"样式值")

 

3.操作元素的内容

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第6张图片

html()、html("html内容")、text()、text("text内容") 均操作非表单元素

html("html内容")可以在内容中设置样式;

使用text("text内容") 只能识别到文本内容,标签效果不识别

val()、val("值")操作表单元素

表单元素:

文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

非表单元素:

div、span、h1~h6、table、tr、td、li、p等 

4.创建元素

在jQuery中创建元素很简单,直接使用核心函数即可

    //创建元素
    let p = "

这是一个P标签

" console.log($(p));

 

5.添加元素

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第7张图片

 (1).前追加子元素

        指定元素.prepend(内容)  在指定元素内部的最前面追加元素,内容可以是字符串、html元素或jQuery对象

        $(内容).prependTo(指定元素)  把内容追加到指定元素内容的最前面,内容可以是字符串、html元素或jQuery对象

(2).后追加子元素

        指定元素.append(内容)  在指定元素内部的最后面追加元素,内容可以是字符串、html元素或jQuery对象

        $(内容).appendTo(指定元素)  把内容追加到指定元素内容的最后面,内容可以是字符串、html元素或jQuery对象

(3).前追加同级元素

        before()  在指定元素的前面追加内容

(4).后追加同级元素

        after()  在指定元素的后面追加内容

注:

在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置

如果元素本身存在(已有元素),会将原来元素直接剪切设置到指定位置 

 

6.删除元素

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第8张图片

指定元素.remove()

指定元素.empty() 

 

7.遍历元素 

each()

$(selector).each(function(index,element)):遍历元素

参数 function 为遍历时的回调函数

index 为遍历元素的序列号,从0开始。

element是当前的元素,此时是dom元素

六、jQuery事件 

1.ready()加载事件

 ready()预加载事件,当页面的dom结构加载完毕后执行,类似于onLoad()事件

ready()可以写多个,按照顺序执行

语法:$(document).ready(function(){})

简写:$(function(){})


    
    Document
    
    


    

text

 

2.bind()绑定事件

Jquery对象、Jquery选择器、Jquery Dom操作及事件_第9张图片

 (1).绑定单个事件

bind绑定

        $("元素").bind("事件类型",function(){})


    
点击查看名言

 

直接绑定

        $("元素").事件名(function(){})


    
点击查看名言

1.确定为哪些元素绑定事件

        获取元素

2.绑定声什么事件(事件类型)

        第一个参数:事件的类型

3.相应事件触发的,执行的操作

        第二个参数:函数 

(2).绑定多个事件

bind绑定

1.同时为多个事件绑定同一个函数

            指定元素.bind("事件类型1 事件类型2 ...",function(){})


    

2.为元素绑定多个事件,并设置对应的函数

            指定元素.bind("事件类型",function(){

            }).bind("事件类型",function(){

            })


    

3.为元素绑定多个事件,并设置对应的函数

            指定元素.bind({

                "事件类型":function(){},

                "事件类型":function(){}

            })


    

直接绑定

            指定元素.事件名(function(){

            }).事件名(function(){

            })


    

你可能感兴趣的:(JavaScript,jquery,javascript,前端,开发语言,html)