jQuery全bootstrap

Posted 2021-04-08 虫萧

jQuery选择器

基础选择器
$('#id值')
$('.类值')
$('div')
$('*')
$('div,p')

层级选择器
$('div p')
$('div.p')
$('div+p')
$('div>a')
$('div~a')

基本筛选器
:first
:last
:eq(索引)
:odd 索引为奇数的
:even 索引为偶数的
:gt(索引) 大于某个索引的那些元素
:lt(索引) 小于指定索引的
:not('选择器')  排错满足这个选择器的那些标签
:has('选择器')  找到后代中有满足这个选择器的标签

属性选择器
[属性名]
[属性名=属性值]
[属性名!=属性值]
input[type=text]

表单筛选器
:text  input type=text 的input标签
:password
...

表单对象属性筛选器
:enabled
:disabled
:checked
:selected

筛选器方法

下一个:
    .next()
    .nextAll()
    .nextUntil('选择器')
上一个
    .prev()
    .prevAll()
    .prenUntil('选择器')
父级
    .parent()
    .parents()
    .parentsUntil('选择器')

儿子和兄弟
    .children()  所有的儿子
    .children('选择器')

    .siblings()  所有兄弟标签
    .siblings('选择器')
filter过滤
    $('div').filter('选择器')  
find() 找后代的
    $('div').find('#d1')

.first()
.last()
...

样式操作

样式类
addClass()
removeClass()
hasClass()
toggleClass()

css操作
.css({'color':'red',})

位置操作
查看位置
    offset()
    position()
设置位置
    offset({top:100,left:200})

尺寸
content
    .height()
    .width()
content + padding
    .innerHeight()
    .innerWidth()
content +padding + border
    .outerHeight()
    .outerWidth()

文本操作
查看文本
    .html()  文本+标签
    .text()  文本
设置
    .html('xxx')  识别标签
    .text('xxx')

值操作
获取值
    input type='text'   --- $('[type="text"]').val()
    input type='radio'  --- $('[typy="radio"]:checked').val()
    input type='checkbox'  --- var a = $('[typy="checkbox"]:checked')  
                                for (var i=0;i<a.length;i++){
                                    a.eq(i).val();
                                }    
    select 单选   ---  $('select').val();
    select 多选   ---  $('select').val();

设置值
    input type='text'   --- $('[type="text"]').val('xxx')
    input type='radio'  --- $('[typy="radio"]').val(['1'])
    input type='checkbox'  --- $('[typy="checkbox"]').val(['1','2'])

    select 单选   ---  $('select').val('1');
    select 多选   ---  $('select').val(['1','2']);

属性操作
attr()  
    查看属性  .attr('属性名') 
    设置属性  .attr({属性名':'属性值',})

prop()
    checked  selected disabled..
    查看属性
        .prop('checked') -- true\false
    设置属性
        .prop('checked',true)

文档操作
插入到某个标签的里面的后面
$(A).append(B)         $(A).append('<a href="">xx</a>') 
$(B).appendTo(A) 

插入到某个标签里面的前面
$(A).prepend(B)
$(B).prependTo(A)

插入到某个标签外面的后面
$(A).after(B)
$(B).insertAfter(A)

插入到某个标签外面的前面
$(A).before(B)
$(B).insertBefore(A)

清空和移除
remove()  
empty()

替换
$(A).replaceWith(B)
$(B).replaceAll(A)

克隆
.clone()
.clone(true)  连带事件一起克隆

---

jQuery

1.jQuery是一个轻量级的、兼容多浏览器的javascript库。

2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

3. 插件扩展开发。jQuery有着丰富的第三方的插件

　jQuery的引入方式有两种：

1.直接下载文件到本地（最常用），从本地中导入。

2.使用文件的网络地址，就像img标签里面的那个src的用法差不多。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 **jQuery对象**，那么它就可以使用jQuery里提供的方法：例如$(“#i1”).html()。

jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象

$variable[0]//jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了

查找标签

基本选择器（同css）

id选择器：

$("#id")  
引号里面写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象

标签选择器：

$("tagName")

class选择器：

$(".className")

配合使用：

$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器：

$("*")

组合选择器：

$("#id, .className, tagName")

层级选择器：

x和y可以为任意选择器

$("x y");             // x的所有后代y（子子孙孙）
$("x > y");            // x的所有儿子y（儿子）
$("x + y")            // 找到所有紧挨在x后面的y
$("x ~ y")            // x之后所有的兄弟y

基本筛选器（选择之后进行过滤）：

:first                 // 第一个

:last                 // 最后一个

:eq(index)            // 索引等于index的那个元素

:even                 // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd                 // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)            // 匹配所有大于给定索引值的元素

:lt(index)            // 匹配所有小于给定索引值的元素

:not(元素选择器)        // 移除所有满足not条件的标签

:has(元素选择器)        // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例：
$("div:has(h1)")    // 找到所有后代中有h1标签的div标签，首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来

$("div:has(.c1)")    // 找到所有后代中有c1样式类（类属性class='c1'）的div标签

$("div:not(.c1)")    // 找到所有不包含c1样式类的div标签

$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器：

[attribute]

[attribute=value]    // 属性等于

[attribute!=value]    // 属性不等于

// 示例,多用于input标签
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");   // 取到类型不是text的input标签

表单筛选器：

（多用于找form表单里面出现的input标签，也可通过属性选择器找，但用这个样简单）

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

例子：
$(":checkbox")  // 找到所有的checkbox

表单对象属性:

:enabled

:disabled

:checked
$(":checked")  //会把input标签中有checked属性的标签和select中的option标签中被选中的标签都筛选出来，$("input:checked")则不会。 


:selected

例：
$("input:enabled")  // 找到可用的input标签

筛选器方法

选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号。

下一个元素：

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")    #直到找到id为i2的标签就结束查找，不包含它

上一个元素：

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

找查标签顺序是往上找到。

父亲元素：

$("#id").parent()

$("#id").parents()          // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

儿子和兄弟元素：

$("#id").children();        // 儿子们

$("#id").siblings();        // 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选

查找，搜索所有与指定表达式匹配的元素。经常用于找出正在处理的元素的后代元素。

$("div").find("p")     等价于$("div p")

筛选，筛选出与指定表达式匹配的元素集合。经常用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  等价于 $("div.c1")

//从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签

其他方法：

.first()     // 获取匹配的第一个元素
.last()     // 获取匹配的最后一个元素
.not()         // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()         // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()         // 索引值等于指定值的元素

操作标签

样式操作

样式类（添加删除class类的值来修改样式）

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

修改css的属性来修改样式

$(.c1).css({"color":"red",})  修改样式

$(.c1).css("color")              获取该样式的值

位置操作

offset()    // 获取匹配元素在当前窗口的相对偏移或设置元素位置

position()    // 获取匹配元素最近的具有相对位置(position:relative或position:absolute)的父级元素的距离的偏移，不能设置元素位置

$(window).scrollTop()  //滚轮向下移动的距离

$(window).scrollLeft() //滚轮向左移动的距离

尺寸：

height()和width()              //盒子模型content的大小，即标签的高度和宽度



innerHeight()和innerWidth()    //内容content高度 + 两个padding的高度和宽度

outerHeight()和outerWidth()    //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离

文本操作

HTML代码：

html()                // 取得第一个匹配元素的html内容，包含标签内容

html(val)            // 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

文本值：

text()                // 取得所有匹配元素的内容，只有文本内容，没有标签

text(val)            // 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去

值：

val()                // 取得第一个匹配元素的当前值

val(val)            // 设置所有匹配元素的值

val([val1, val2])    // 设置多选的checkbox、多选select的值

注意：.val()虽然能够找到多个对象，但取值的的时候只能返回第一个值。

属性操作

ID自带属性等或自定义属性用attr()：

attr(attrName)                // 返回第一个匹配元素的属性值

attr(attrName, attrValue)    // 为所有匹配元素设置一个属性值

attr({k1: v1, k2:v2})        // 为所有匹配元素设置多个属性值
removeAttr()                // 从每一个匹配的元素中删除一个属性

对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop()。

prop()                         // 获取属性

prop和attr的区别：

attr全称attribute(属性) ，prop全称property(属性)。虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

例：

<input type="checkbox" id="i1" value="1">

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。

<input type="checkbox" checked id="i1" value="1">

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")   // true

attr作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，也可以理解为这个dom对象的状态，选中返回true，没选中返回false。

<input type="checkbox" checked id="i1" value="1" me="自定义属性">

$("#i1").attr("me")       // "自定义属性"
$("#i1").prop("me")          // undefined

故prop不支持获取标签的自定义属性。

文档处理

添加到指定元素内部的后面

$(A).append(B)            // 把B追加到A
$(A).appendTo(B)        // 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)            // 把B前置到A
$(A).prependTo(B)        // 把A前置到B

添加到指定元素外部的后面

$(A).after(B)            // 把B放到A的后面
$(A).insertAfter(B)        // 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)            // 把B放到A的前面
$(A).insertBefore(B)    // 把A放到B的前面

移除和清空元素

remove()                // 从DOM中删除所有匹配的元素。
empty()                    // 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在

替换

replaceWith()
replaceAll()

克隆

clone(true)         // clone方法不加参数true，克隆标签但不克隆标签带的事件， clone方法加参数true，克隆标签并且克隆标签带的事件。

事件

事件绑定方式
方式1
    $('div').click(function(){});
方式2
    $('div').on( events [, selector ],function(){})
        1.events： 事件
        2.selector: 选择器（可选的）
        3.function: 事件处理函数

移除事件：
    $('div').off( events [, selector ][,function(){}])
　　　　　　1.events： 事件
　　　　　　2.selector: 选择器（可选的）
　　　　　　3.function: 事件处理函数
　　 $("li").off("click")；就可以了

常用事件

click()
hover()              //jQuery对mouseover()和mouseenter()封装，不是dom中的那个hover，写函数是需写两个：hover(function(){},function(){})，第一个：鼠标移动上去后触发，第二个：鼠标移走后触发。

blur()
focus()
change()            //内容发生变化，input，select等
keyup()  
keydown()

mouseover() 
mouseenter()
//mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

键盘上每个键都有对应的一个KeyCode：

<script>
$(window).keydown(function(e){      //e:keydown事件对象
console.log(e.keyCode);
})
</script>

注意：像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定。想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});

$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

事件冒泡：子标签事件触发之后,会连带触发父标签及上层标签的事件。

阻止后续事件发生:
return false;
或
e.stopPropagation();    #e：事件对象

常见阻止表单提交等，如果input标签里面的值为空就组织它提交，就可以使用这两种方法`

事件委托：将事件委托给上层标签。事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

上层标签对象.on('click','委托人选择器',function(){});

页面载入：页面从上往下依次载入。

window.onload = function(){};  
等页面中所有内容加载完成之后,执行函数，存在覆盖现象，只保留最后一个函数。


$(document).ready(function(){});  
不存在覆盖现象，并且不等待图片\视频等内容的加载。
简写：$(function(){})

动画效果

// 基本
show([s,[e],[fn]])  $('.c1').show()  //show(5000),就是5秒之后显示出来这个标签，并且有一个动画效果
hide([s,[e],[fn]])  $('.c1').hide()
toggle([s],[e],[fn])

// 滑动（拉窗帘一样）
slideDown([s],[e],[fn])  //直接操作的是img标签和操作img标签的父级标签，两个的效果是不同的
slideUp([s,[e],[fn]]) 
slideToggle([s],[e],[fn])

// 淡入淡出（控制透明度）
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  o参数是透明度，0-1的区间
fadeToggle([s,[e],[fn]])

// 自定义
animate(p,[s],[e],[fn])

each

jQuery.each(collection, callback(indexInArray, valueOfElement))

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30]
$.each(li,function(i, v){  
  console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。循环自定义对象也是可以的。
})

.each(function(index, Element))

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加c1
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法，也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

　　　　终止each循环：return false;

　　　　跳过本次循环：return;

data

任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量。

.data(key, value): 设置值

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key): 取值，没有返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值（通过 .data(name, value)或 HTML5 data-*属性设置的值）

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

extend

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

补充

<a href="">xxx</a>      点击a标签会刷新页面

<a href="javascript:void(0);">xxx</a>    点击a标签不刷新页面，但有a标签自带效果

<a href="#">xxx</a>     点击a标签不刷新页面，但utl地址路径后会添加一个#号

<a>xxx</a>                相当于一个纯文本，且无a标签效果。

bootstrap：https://v3.bootcss.com

图标库：www.iconfont.cn、www.fontawesome.com，设置图标样式与设置字体样式一样。