03. jQuery

一、jQuery介绍

??jQuery，顾名思义，也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。它的核心思想是write less,do more（写得更少,做得更多），所以它实现了很多浏览器的兼容问题。jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。

                
             

     
    Title

??jquery-1.7.2.js放在下一级目录【library】中；

二、jQuery核心函数

??$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数。

  • 传入参数为函数时
    • 表示页面加载完成之后。相当于 window.onload = function(){}
  • 传入参数为HTML字符串时
    • 会对我们创建这个html标签对象
  • 传入参数为选择器字符串时
    • $(“#id 属性值”); id选择器，根据id查询标签对象
    • $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
    • $(“.class 属性值”); 类型选择器，可以根据class属性查询标签对象
  • 传入参数为DOM对象时
    • 会把这个dom对象转换为jQuery对象
                
             

     
    Title

三、jQuery对象和dom对象区分

3.1、什么是jQuery对象，什么是dom对象

  • Dom对象
    • 通过getElementById()查询出来的标签对象是Dom对象
    • 通过getElementsByName()查询出来的标签对象是Dom对象
    • 通过getElementsByTagName()查询出来的标签对象是Dom对象
    • 通过createElement()方法创建的对象，是Dom对象
  • jQuery对象
    • 通过JQuery提供的API创建的对象，是JQuery对象
    • 通过JQuery包装的Dom对象，也是JQuery对象
    • 通过JQuery提供的API查询到的对象，是JQuery对象

DOM对象Alert出来的效果是：[object HTML 标签名 Element]
jQuery对象Alert出来的效果是：[object Object]
jQuery对象的本质：jQuery对象是dom对象的数组+jQuery提供的一系列功能函数。
jQuery对象不能使用DOM对象的属性和方法；DOM对象也不能使用jQuery对象的属性和方法；

3.2、Dom对象和jQuery对象互转

  • dom对象转化为jQuery对象
    1. 先有DOM对象
    2. $(DOM对象)就可以转换成为jQuery对象
  • jQuery对象转为dom对象
    1. 先有jQuery对象
    2. jQuery对象[下标]取出相应的DOM对象

                
             

     
    Title

四、jQuery选择器

4.1、基本选择器

  • ID选择器：根据id查找标签对象

  • .class选择器：根据class查找标签对象
  • element选择器：根据标签名查找标签对象
  • *选择器：表示任意的，所有的元素
  • selector1,selector2组合选择器：合并选择器1，选择器2的结果并返回

4.2、层级选择器

  • ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
  • parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
  • prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素
  • prev ~ sibings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

4.3、过滤选择器

4.3.1、基本过滤器

  • :first 获取第一个元素
  • :last 获取最后个元素
  • :not(selector) 去除所有与给定选择器匹配的元素
  • :even 匹配所有索引值为偶数的元素，从0开始计数
  • :odd 匹配所有索引值为奇数的元素，从0开始计数
  • :eq(index) 匹配一个给定索引值的元素
  • :gt(index) 匹配所有大于给定索引值的元素
  • :lt(index) 匹配所有小于给定索引值的元素
  • :header 匹配如h1，h2，h3 之类的标题元素
  • :animated 匹配所有正在执行动画效果的元素

4.3.2、内容过滤器

  • :contains(text) 匹配包含给定文本的元素
  • :empty 匹配所有不包含子元素或者文本的空元素
  • :parent 匹配含有子元素或者文本的元素
  • :has(selector) 匹配含有选择器所匹配的元素的元素

4.3.3、属性过滤器

  • [attribute] 匹配包含给定属性的元素
  • [attribute=value] 匹配给定的属性是某个特定值的元素
  • [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
  • [attribute^=value] 匹配给定的属性是以某些值开始的元素
  • [attribute$=value] 匹配给定的属性是以某些值结尾的元素
  • [attribute*=value] 匹配给定的属性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

4.3.4、表单过滤器

  • :input 匹配所有input，textarea，select和button元素
  • :text 匹配所有文本输入框
  • :password 匹配所有的密码输入框
  • :radio 匹配所有的单选框
  • :checkbox 匹配所有的复选框
  • :submit 匹配所有提交按钮
  • :image 匹配所有img标签
  • :reset 匹配所有重置按钮
  • :button 匹配所有input type=button
  • :file 匹配所有input type=file文件上传
  • :hidden 匹配所有不可见元素display:none或input type=hidden

4.3.5、表单对象属性过滤器

  • :enabled 匹配所有可用元素
  • :disabled 匹配所有不可用元素
  • :checked 匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
  • :selected 匹配所有选中的option

五、jQuery 元素筛选

  • eq() 获取给定索引的元素，功能跟:eq()一样
  • first() 获取第一个元素，功能跟:first一样
  • last() 获取最后一个元素，功能跟:last一样
  • filter(exp) 留下匹配的元素
  • is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
  • has(exp) 返回包含有匹配选择器的元素的元素，功能跟:has一样
  • not(exp) 删除匹配选择器的元素，功能跟:not一样
  • children(exp) 返回匹配给定选择器的子元素，功能跟parent>child一样
  • find(exp) 返回匹配给定选择器的后代元素，功能跟ancestor descendant一样
  • next() 返回当前元素的下一个兄弟元素，功能跟prev + next功能一样
  • nextAll() 返回当前元素后面所有的兄弟元素，功能跟prev ~ siblings功能一样
  • nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
  • parent() 返回父元素
  • prev(exp) 返回当前元素的上一个兄弟元素
  • prevAll() 返回当前元素前面所有的兄弟元素
  • prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
  • siblings(exp) 返回所有兄弟元素
  • add() 把add匹配的选择器的元素添加到当前jquery对象中

六、jQuery的属性操作

  • html() 它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样。
  • text() 它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样。
  • val() 它可以设置和获取表单项的value属性值，跟dom属性value一样
  • attr() 可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等，attr()方法还可以操作非标准的属性，比如自定义属性。
  • prop() 可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled等等

template：

                
             

     
    Title
    
    


    
 你爱好的运动是？
        全选/全不选
 
        足球 
        篮球 
        羽毛球 
        乒乓球

七、DOM的增删改

  • 内部插入：
    • appendTo() a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素
    • prependTo() a.prependTo(b) 把a插到b所有子元素前面，成为第一个子元素
  • 外部插入：
    • insertAfter() a.insertAfter(b) 得到ba
    • insertBefore() a.insertBefore(b) 得到ab
  • 替换:
    • replaceWith() a.replaceWith(b) 用b替换掉a
    • replaceAll() a.replaceAll(b) 用a替换掉所有b
  • 删除：
    • remove() a.remove(); 删除a标签
    • empty() a.empty(); 清空a标签里的内容

template：

                
             

     
    Title
    
    
    


    
 
         
         
         
    

    
 
         
         
        
    




                
             

     
    Title
    
    


    

        

            Name
            Email
            Salary
             
        

        

            Tom
            tom@tom.com
            5000
            Delete
        

        

            Jerry
            jerry@sohu.com
            8000
            Delete
        

        

            Bob
            bob@tom.com
            10000
            Delete
        

    


    

        
添加新员工

        

            

                name: 
                
            

            

                email: 
                  
            

            

                salary:

八、CSS样式操作

  • addClass() 添加样式
  • removeClass() 删除样式
  • toggleClass() 有就删除，没有就添加样式。
  • offset() 获取和设置元素的坐标。

九、jQuery动画

  • 基本动画
    • show() 将隐藏的元素显示
    • hide() 将可见的元素隐藏。
    • toggle() 可见就隐藏，不可见就显示。
  • 淡入淡出动画
    • fadeIn() 淡入（慢慢可见）
    • fadeOut() 淡出（慢慢消失）
    • fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
    • fadeToggle() 淡入/淡出 切换

基本动画方法都可以添加参数。第一个参数是动画 执行的时长，以毫秒为单位；第二个参数是动画的回调函数 (动画完成后自动调用的函数)；

十、jQuery事件操作

10.1、$( function(){} );和window.onload = function(){}的区别

  • $(function(){});
    • jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
  • window.onload = function(){}
    • 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
                
             

     
    Title

jQuery页面加载完成之后先执行，在执行原生js的页面加载完成之后。jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后马上执行。原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示是需要的内容加载完成。
原生js的页面加载完成之后，只会执行最后一次的赋值函数。jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。

10.2、jQuery中其他的事件处理方法：

  • click() 它可以绑定单击事件，以及触发单击事件
  • mouseover() 鼠标移入事件
  • mouseout() 鼠标移出事件
  • bind() 可以给元素一次性绑定一个或多个事件。
  • one() 使用上跟 bind 一样。但是one方法绑定的事件只会响应一次。
  • unbind() 跟 bind 方法相反的操作，解除事件的绑定
  • live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

10.3、事件的冒泡

??事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。在子元素事件函数体内，return false;可以阻止事件的冒泡传递。

                
             

     
    Title

    

    
    


    

        外层div元素
        内层span元素
        外层div元素
    

    
    

    
    


    WWW.HAO123.COM

10.4、javaScript事件对象

??事件对象，是封装有触发的事件信息的一个javascript对象。如何获取呢javascript事件对象呢？在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event。这个event就是javascript传递参事件处理函数的事件对象。

                
             

     
    Title
03.JavaWebjQuery

相关

jQuery 留言表单验证

[jQuery]下载链接文件

jquery script两个属性

JQuery对象关系图

jQuery 当前展开其他收缩 三级下拉菜单（转载）

jquery 数据查询

jquery手写tab选项卡功能

前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

jquery easyui datagrid mvc server端分页排序筛选的实现

前端浅谈 Vue 和 jQuery 的区别

浅谈Vue和Jquery的区别

jquery获取radio的文本或值

标签