logo logo
RogevnBlog
banner
NEWS LETTER

jQuery实战指南

Scroll down

JQuery&Bootstrap笔记

jQuery安装

通过jquery.com下载

通过script标签引入

jQuery是什么

属于js家族，也是一种流行的js程序库，他对js对象和函数的封装

jQuery语法

1
2
3
$(document).ready(function(){
   $("p").click()
})

jQuery事件

基础事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    // 页面加载事件

    $(document).ready()

    //点击事件

    $(Select).click()

    //双击事件

    $(select).dblclick()

    //鼠标上移  mouseover在鼠标上移到子元素依旧执行，mouseenter不执行

    $(select).mouseover()

    $(select).mouseenter()

    //鼠标下移  mouseout鼠标离开子元素也触发，mouseleave不触发

    $(select).mouseout()

    $(select).mouseleave()

    //键盘按下的过程

    $(select).keydown()

    //键盘按下

    $(select).keypress()

    //键盘松开

    $(select).keyup()

    //表单提交

    $("form").submit()

    //获取焦点

    $(select).focus()

    //失去焦点

    $(select).blur()

    // 滚动条滚动

$(select).scroll()

复合事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    // hover等同于mouseover和mouseout事件的组合

    $("div").hover(function(){

        $("div").show()

    },function(){

        $("div").hide()

    })

    // .toggle不带参数=show()+hide()

    $("div").toggle()


    //点击第一次弹窗1，点击第二次弹窗2，点击第三次弹窗1

    $("div").toggle(function(){

        alert("1")

    },function(){

        alert("2")

    })

    //添加和移除Class名为hhh的样式
    $("div").toggleClass("hhh")

绑定事件

1
2
3
4
5
    $("button").bind("click",function(){

        alert("点")

    })

解除绑定

1
$("div").unbind("mouseot");

jQuery选择器

基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    // 标签选择器
    $("p")

    // ID选择器
    $("\#aaa")

    // 类选择器
    $(".class")

    // 并集选择器
    $("p,div")

    //交集选择器
    $("p.span")

    // 全局选择器
$("\*")

层次选择器

1
2
3
4
5
6
7
8
9
10
11
    // 后代选择器
    $("#menu span")     //选取\#menu下的所有span元素

    // 子选择器
    $("#menu>span")     //选取\#menu下的子元素span

    // 相邻兄弟选择器
    $("h2+dl")          //选取紧邻h2的同辈元素dl

    // 同辈元素选择器
    $("h2~dl")          //选取h2之后的同辈元素dl

属性选择器

   

1
2
3
4
5
6
7
8
9
10
11
12
13
$("[href]")         //选取含有href的所有元素

    $("[href='#']")     //选取href为\#的所有元素

    $("[href !='#'")   //选取href值不为\#的元素

    $("[href ^='en']")  //选取href值为en开头的元素

    $("[href $='.jpg']")//选取href值为.jpg结束的元素

    $("[href *='txt']") //选取href值含有txt的元素

.hasChildNodes()    //判断是否有子节点返回true或false

基本过滤选择器

    $(“li:first”)           //选取所有li元素中的第一个li元素

    $(“li:last”)            //选取所有li元素中的最后一个li元素

    $(“li:not(.there)”)     //选取所有li元素中class不是there的元素

    $(“li:even”)            //选取所有li元素中索引为偶数的元素

    $(“li:odd”)             //选取所有li元素中索引为奇数的元素

    $(“li:eq(1)”)           //选取所有li元素索引等于1的元素

    $(“li:gt(1)”)           //选取所有li元素索引大于1的元素

    $(“li:lt(1)”)           //选取所有li元素索引小于1的元素

    $(“:header”)            //选取所有标题元素

    $(“:focus”)             //选取当前获取焦点的元素

    $(“:animated”)          //选取当前所有动画元素

可见性过渡元素

    $(“:visible”)           //选取所有可见的元素

    $(“:hidden”)            //选取所有隐藏的元素

hidden不仅包含样式属性display为none的元素也包括文本隐藏域type=“hidden”和visible：hidden之类的元素

元素属性获取和设置

    // 使用jQuery获取设置元素属性

    $(“div”).attr(“width”)

    $(“div”).attr({“width”:”100px”,”height”:”100px”})

    // 获取设置内容

    $(“div”).text()

    // 获取其内部标签和内容

    $(“div”).html()

    // 获取value属性

$(“div”).val()

    // 删除元素属性

    $(“div”).removeAttr(name);

jQuery操作页面元素

样式设置

使用addClass()方法为元素添加class属性

$(“p”).addClass(“hhh”)

使用removeClass()方法删除元素属性

$(“div”).removeClass(“aaa”)

使用css()设置css样式

单个样式：

$(“p”).css(“color”,”green”)

设置多个样式

$(“p”).css({“color”:”green”,”font-size”:”50px”})

.show()和.hide()属性设置元素的显示和隐藏

$(“#title”).html() 等同于document.getElementById().innerHTML

jQuery和DOM对象转化

jquery转DOM对象

var $textname=$(“#textname”) //返回的都是数组

var textname=$textname[0]

DOM对象转jquery对象

var textname=document.getElementById(“textname”)

var $testname=$(textname)

节点操作

插入节点

    b.prepend(a)        //内部头插

    b.append(a)         //内部尾插

    b.before(a)         //外部头插（b的上面）

    b.after(a)          //外部尾插（b的下面）

删除节点

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
   // 删除整个节点

    $("p").remove();

    // 删除整个节点，但保留元素的绑定事件和附加数据

    $("p").detach();

    // 例如：

        $(document).ready(function () {

            var x;

            $("#btn1").click(function () {

                x = $("p").detach();

            });

            $("#btn2").click(function () {

                $("body").prepend(x);

            });

        });

    // 清空节点里面的内容

$("p").empty()

替换元素

1
2
//替换节点
$("p").replaceWith("<div>111</div>")

复制节点

1
2
3
4
5
6
7
        //复制本身及子元素和他们的事件处理

        $("p").clone(true);

        //仅复制本身及子元素（默认值）

        $("p").clone(false);

遍历元素

向上遍历

        //返回被选元素的直接父元素

        $(“div”).parent();

        //返回被选元素的所有祖先元素，它一路向上直到文档的根元素

        //这句话是返回所有

元素的所有祖先，并且它是
    元素

            $(“div”).parents(“ul”);

    同辈遍历

             //返回被选元素的所有同胞元素

             //也可以设置指定元素

             $(“div”).siblings(“ul”);

             //返回被选元素的下一个同胞元素

             $(“div”).next();

             //返回被选元素的所有跟随的同胞元素

             $(“div”).nextAll();

             //返回被选元素的上一个同胞元素

             $(“div”).prev();

             //返回被选元素的所有上方跟随的同胞元素

             $(“div”).prevAll();

    向下遍历

            //返回被选元素的所有直接子元素

            $(“div”).children();

            //返回被选元素的后代指定元素

            $(“div”).find();

    动画效果

    显示/隐藏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .show(1000,function(){

    执行时间和回调函数

    })

    .hide(1000,function(){

    执行时间和回调函数

    })

    复合：.toggle

    滑入/滑出

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .slideDown(1000,function(){

    执行时间和回调函数

    })

    .slideUp(1000,function(){

    执行时间和回调函数

    })

    复合：.slideToggle

    淡入/淡出

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .fadeIn(1000,function(){

    执行时间和回调函数

    })

    .fadeOut(1000,function(){

    执行时间和回调函数

    })

    复合：.fadeToggle

    逐渐改变物体透明度

    1
    .fadeTo(1000,0.4)

    Bootstrap

    Bootstrap基础

    什么是Bootstrap

    是一款基于html、css、js的一款前端框架

    需要引入css和js包

    下载 Bootstrap · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网 (bootcss.com)

    栅格布局（响应式布局）

    同一套页面可以兼容不同分辨率的设备

    实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

    步骤：

    1. 定义容器，相当于之前的table

    容器分类

    • .container 两边留白

    • .container-fluid 占一整行

    1. 定义行，相当于tr .row

    2. 定义元素，指定该元素在不同设备上所占的格子数。样式：col-设备代号-格子数

    设备代号

    • xs：超小屏幕 手机（<768px）:col-xs-12

    • sm:平板（>=768）

    • md:笔记本电脑（>=992）

    • lg电脑显示器（>=1200）

    注意：向上兼容，设置了手机电脑端也有效反之则不行

    基础模块

    图片

    按钮

    表格

Other Articles
cover
前端
Ajax通信技术
  • 23/06/12
  • 17:00
  • 1.5k
  • 6
cover
Java
SpringMVC
  • 23/03/21
  • 17:11
  • 4.3k
  • 20
© 2023- 2023 长生风月
The blog has been lovely to run day