本文共 3049 字，大约阅读时间需要 10 分钟。

官网:https://jquery.cuishifeng.cn/

类似jquery的轻量级的针对现代高级浏览器的JavaScript库:http://www.wenshuai.cn/manual/zepto/

什么是jQuery？

jQuery是一个快速，小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

优点:

1,提供了强大的功能函数 2,解决浏览器的兼容性问题 3,实现丰富的UI和插件 4,纠正错误的脚本知识

jQuery的下载和安装

不下载本地使用的地址:bootcdn.cn

下载地址: https://jquery.com

使用

引入到页面中即可(注意路径问题)

jQuery核心

$符号在jquery中代表对jquery对象的引用,"jquery"是核心对象;

只有jquery对象才能调用jquery提供的方法

DOM对象与jquery包装集对象

原始的DOM对象只有DOM接口提供的方法和属性,通过js代码获取的对象都是dom对象;

而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能调用jQuery提供的方法 1.1DOM对象 javascript中获取dom对象,dom对象只有有限的属性和方法;

var mydiv = document.getElementsByClassName("mydiv")[0];

1.2jquery包装集对象

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

var jqueryDiv = $('.mydiv');

1.3Dom对象转jquery对象

只需要利用$()方法进行包装即可

mydiv2 = $(mydiv);

1.3jquery对象转Dom对象

jquery对象转dom对象只需要取数组中的元素即可

var domDiv = jqueryDiv[0];

    
   
    张三
   
//引入jquery

jquery选择器

和使用js操作一样,获取文档中的节点对象是很频繁的一个操作,在jquery中提供了简便的方式供我们查找定位元素,称为jquery选择器

jquery选择器按照功能主要分为"选择"和"过滤"

(1)基础选择器

    
   
    元素选择器
   
    
   
    id选择器 
    span中的内容 
   
    样式选择器

(2)层次选择器

    
   
    层次选择器        
    
     父选择器            
     
      子选择器
     
            
                 
             
    
        
    
     选择器2            
     
      选择器2中的div
     
        
    
    
   

(3)表单选择器

表单选择器可以理解为是选中input(表单)中及button(按钮)的type的值

    
   
        
     账号: 
     
    
 密码: 
    
    
 年龄: 
    小屁孩        
    你懂的 
    
 爱好:        
    篮球        
    爬床        
    代码 
    
 来自: 
            请选择        上海        江苏    
    
 简介: 
     头像: 
     
    
        
            
    提交        
    重置    
   

.eq选择器

通过为 index 为 2 的 div 添加适当的类，将其变为蓝色：

$("body").find("div").eq(2).addClass("blue");

find

搜索所有段落中的后代 span 元素

jquery DOM操作

jquery也提供了对html节点的操作,而且在原生js的基础进行了优化,使用更加方便

可以做到: 查找元素;创建节点对象;访问和设置节点对象的值以及属性;添加节点;删除节点;删除,添加,修改,设定节点的css样式等

注意:以下的操作方法只使用于jquery对象

操作元素的属性

1,获取属性

attr(“属性名”) prop(“属性名”) 2,设置属性 attr(“属性名”,“属性值”) prop(“属性名”,“属性值”) 3,移除属性 removeAttr(“属性值”) 属性的分类 固有属性:元素本身就有的属性(id,name,class,style) 返回值是boolean的属性:checked(选中),selected(带有预先选定的选项的下拉列表),disabled(disabled 属性规定应该禁用 input 元素) 自定义属性:用户自己定义的属性 区别: (1)如果是固有属性:attr()和prop()方法均可操作 (2)自定义属性:attr()可操作,prop()不可操作 (3)如果是返回值为布尔类型 若设置了属性,attr()返回具体的值,prop()返回true 若未设置属性,attr()返回undefined,prop()返回false 总结:

如果属性的类型是布尔,

则使用prop()方法,否则使用attr()方法这样就不会出错

    aa    bb

操作元素的样式

    
css()方法设置元素样式
    
   
    天蓝色
   
    
   
    大红色
   
    
   
    天蓝色
   

操作元素的内容

    
 html()和text()方法设置元素内容 
    
   
    
   
    
   
    
   
    

创建元素

添加元素

注:在添加元素时,如果元素本身不存在,此时会将元素追加到指定位置

如果元素本身存在,会将元素直接剪切到指定位置

    
prepend()方法前面添加内容
    
prependTo()方法前面添加内容
    
append()方法后添加内容
    
appendTo()方法后添加内容
    男神    偶像    
   
        
    小鲜肉    
   

删除和遍历元素

    
删除元素
            jquery 删除        javase    http协议    servlet

遍历元素

    
遍历元素
            jquery 删除        javase    http协议    servlet

jquery事件

ready()类似于onload()事件(预先加载)

ready()可以写多个,按顺序从上到下执行

$(document).ready(function(){
   })等价于$(function(){
   })

bind()绑定事件

    
   
    点击查看名言
   

小练习:点击按钮后按钮被禁用

绑定多个事件方法(推荐第4种)

转载地址：http://pydyf.baihongyu.com/