JavaEE_day05_JQuery01

一、什么是jQuery?

答:Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

二、 怎么使用jquery?

Jquery它是一个库(框架),要想使用它,必须先引入!
jquery-1.8.3.js:一般用于学习阶段。
jquery-1.8.3.min.js:用于项目使用阶段


三、Jquery的简单入门



    
        
        jquery入门
        
        
    
    
    

四、JS与JQ页面加载区别?

  • 传统的方式页面加载会存在覆盖问题,加载比JQ慢(整个页面加载完毕<包括里面的其它内容,比如图片>);
  • JQ不存在覆盖问题,加载的时候是顺序执行,加载速度比JS快。

五、元素获取:

//JS
document.getElementById();
//JQ
$(“#id”);

六、Jquery对象与DOM对象转换:


    
        
        
        
        
    
    
        
        

sssss

注意:JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。

七、Jquery的效果

JavaEE_day05_JQuery01_第1张图片
jQuery效果.png

案例1:广告图片的显示与隐藏:

步骤:
第一步:引入jQuery相关的文件
第二步:书写页面加载函数
第三步:在页面加载函数中,获取显示广告图片的元素。
第四步:设置定时操作(显示广告图片的函数)
第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())
第六步:清除显示广告图片的定时操作
第七步:设置定时操作(隐藏广告图片的函数)
第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())
第九步:清除隐藏广告图片的定时操作

部分代码如下:


补充内容:Toggle的使用
表示显示和隐藏彼此循环


    
        
        
        
        
    
    
        
![](../img/registImg.jpg)

八、选择器的使用:

1、基本选择器:

  • id选择器:$(“#id名称”);
  • 元素选择器:$(“元素名称”);
  • 类选择器:$(“.类名”);
  • 通配符:*

案例代码:


    
        
        基本选择器
        
        
               
    
    
        
        
        
        
        
        
111
222
333
444
555
666

2、层级选择器:

  • ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
  • parent > child :在给定的父元素下匹配所有的子元素(儿子)
  • prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
  • prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

案例代码:


    
        
        层级选择器
        
        
        
        
        
    
    
        
        
        
        
        
        
111
222
333
444
555
666

3、基本过滤器:

  • $('li').first()等价于:$(“li:first”)
JavaEE_day05_JQuery01_第2张图片
过滤器.png

案例代码:


    
        
        基本过滤选择器
        
        
        
        
    
    
        
        
        
        
        
        
111
222
333
444
555
666

4、属性选择器:


    
        
        层级选择器
        
        
        
    
    
        
        
        
        
111
222
333
444
555
666

5、表单选择器:

JavaEE_day05_JQuery01_第3张图片
表单选择器.png

    
        
        表单选择器
        
        
        
    
    
        
        
        










九、JQ实现表格隔行换色案例:



    
        
        使用jQuery完成表格隔行换色
        
        
        
        
        
    
    
        
编号 姓名 年龄
1 张三 22
2 李四 25
3 王五 27
4 赵六 29
5 田七 30
6 汾九 20

十、JQ实现全选与全不选案例:



    
        
        使用jQuery完成复选框的全选和全不选
        
        
        
        
    
    
        
编号 姓名 年龄
1 张三 22
2 李四 25
3 王五 27
4 赵六 29
5 田七 30
6 汾九 20

你可能感兴趣的:(JavaEE_day05_JQuery01)