阶段五-Day02-jQuery

一、jQuery入门

1. 定义和特点

• 目前最流行的JavaScript函数库之一，对JavaScript进行了封装。

• 并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

• JavaScript的缺点

  • 选择器功能弱

  • DOM操作繁琐至极

  • 浏览器兼容性不好

  • 动画功能弱

• jQuery的优点

  • 强大的选择器

  • 出色的DOM封装

  • 出色的浏览器兼容性

  • 强大的动画功能

  • 体积小，压缩后只有100KB左右

  • 可靠的事件处理机制

  • 使用隐式迭代简化编程

  • 丰富的插件支持

2.jQuery实现:

    
    
    

    

    



    

        
编号
        
姓名
        
性别
        
年龄
    
    

        
1
        
明玉
        
女
        
28
    
    

        
2
        
吕布
        
男
        
38
    
    

        
3
        
貂蝉
        
女
        
18
    
    

        
4
        
西施
        
女
        
16
    
    

        
5
        
曹操
        
男
        
60
    

3. jQuery的使用

• 关于jQuery的使用需要先导入jQuery的js文件，发现jQuery本身就是一个JS文件。

• $是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。 作用1：$(function(){})

  • 相当于 window.οnlοad=function(){}，功能比window.onload更强大

  • window.onload一个页面只能写一个，但是可以写多个$() 而不冲突

  • window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早

  • 完整形式是$(document).ready(…….);

    jQuery(document).ready(…….);

  作用2： $(selector)

  • 选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍

• jQuery的基本语法：$(selector).action

  获取页面内容:$(selector)

  操作页面的内容：action(一般都是方法)

  • 控制页面样式

  • 访问和操作DOM元素

  • 事件处理功能

  • 动画功能

  • Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

4. jQuery对象和DOM对象

在学习jQuery的过程中，经常出现调用函数出错的情况。究其原因，很多是因为还是对jQuery对象和DOM对象理解不清楚了，出现了函数互调的情况，当然出错了。

DOM对象和jQuery对象分别拥有一套独立的属性和函数，不能混用所以我们在这里先来将搞清楚这两个概念吧。

• DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value

• jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()

• DOM对象转换成jQuery对象 $(DOM对象)

• jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

二、jQuery选择器

1. 概述

jQuery提供了丰富的选择器功能，jQuery选择器比JavaScript选择器更加的强大。

回顾：JavaScript是如何直接获取元素节点

• getElementById( ) ：返回一个元素节点对象

• getElementsByName( )：返回多个元素节点（节点数组）

• getElementsByClassName( ) ：返回多个元素节点对象（节点数组）

• getElementsByTagName( ) ：返回多个元素节点对象（节点数组）

2. 基本选择器

1. 标签选择器 $("a")

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

3. 类选择器 $(".class") $("h2.class")

4. 通配选择器 $("*")

5. 并集选择器$("elem1， elem2， elem3")

6. 后代选择器$(ul li)(所有后代)

7. 父子选择器 $(ul > li)(直接子元素)

8. 后面第一个兄弟元素节点 prev + next

9. 后面所有的兄弟元素节点 prev ~ next

    
    
    

    



    
我是段落1.
    
我是段落2.
    
我是段落3.

    

        我是div中span的内容！
        
我是div中的h2标题内容1！
        
我是div中的段落1.
        
我是div中的段落2.
        

            
我是div中的div中的段落.
        
        
我是div中的h2标题内容2！
    

    
我是h3内容1
    
我是h3内容2
    
我是h3内容3

 3.属性选择器

    
    
    
    
    



    

        

            
用户名：
            

        
        

            
密码：
            

        
        

            
爱好：
            

                Java
                C++
                PHP
            
        
        

            
职业：
            

                
                    程序员
                    公务员
                    律师
                    医生
                
            
        
        

            

        
    

4.位置选择器

    
    
    
    


我是段落0.

    
我是段落1.
    
我是段落2.
    
我是段落3.
    
我是段落4.
    
标题1
    
标题2
    
标题3
    

        
我是h3标题
        
我是段落！
    
    

        
唯一的儿子段落！
    

5.表单选择器

注意：$("input")和$(":input")的区别

1. $("input")：标签选择器，只匹配input标签

2. $(":input")： 匹配所有 input， textarea， select 和 button 等元素

    
    
    
    
    



    
    账号: 
    

    密码: 
    

    生日: 

    工资: 

    性别：男
    女 


    爱好：篮球
    足球
    排球
    网球 


    头像：

    

    


    职业：
    程序员
    公务员
    律师

    

    重置
    自我介绍：
    

     勾选同意  

    

6. 事件(都是方法)

    
    
    
    
    


单击


双击






    用户名： 

    

7.动画

    
    
    
    
    



    

隐藏
显示
显示|隐藏

向上滑动
向下滑动
向上滑动|向下滑动

淡出
淡入
淡出|淡入

Run
Hello!


1 zs 18 删除


小说

8.操作文本节点

    
    
    
    
    



    
我是p标签

9.操作属性节点

    
    
    
    
    


跳转

 男
 女

 勾选同意 

10.操作元素节点

    
    
    
    
    


添加一个超链接
获取父元素节点
删除元素节点
删除子元素节点


    我是div



    sp1
    sp2
    sp3


    sp4
    sp5
    sp6

11.操作css样式

12.表单验证

    
    
    
    
    
    



    
注册页面
    

    

        

            

                
用户名：
                

                

            
            

                
密码：
                

                

            
            

                
手机号：
                

                

            
            

                
邮箱：
                

                

            

            

                
性别：
                

                     男
                     女

                
            
            

                
爱好：
                

                     学习
                     整天学习
                
            
            

                
 同意协议