jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

CrazyDemo

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量143

点赞数

分类专栏： web前端 # jQuery

原文链接：https://www.cnblogs.com/clschao/articles/10093264.html

版权

web前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

jQuery

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery选择器

基本选择器

jQuery('#d1')  --  $('#d1')

# 不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象

基本选择器（同css）

id选择器：$("#id") 
 
标签选择器：$("tagName")  $('div')

class选择器：$(".className")  

配合使用：
$("div.c1")  // 找到有c1 class类的div标签
　　　　　　
所有元素选择器：$("*")

组合选择器： $("#id, .className, tagName")

选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,
如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

层级选择器

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

基本筛选器

<ul>
    <li>路飞</li>
    <li>娜美</li>
    <li id="l3">罗宾</li>
    <li>乌索普</li>
    <li id="l5">乔巴</li>
    <li>布鲁克</li>
    <li>索隆</li>
</ul>

:first                //-- 示例:$('ul li:first') // 第一个
:last                 // 最后一个
:eq(index)            // 索引等于index的那个元素
:even                 // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd                  // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)            // 匹配所有大于给定索引值的元素
:lt(index)            // 匹配所有小于给定索引值的元素
:not(元素选择器)       // 移除所有满足not条件的标签
:has(元素选择器)       // --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1))       //-- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签

属性选择器

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

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

表单筛选器

多用于找form表单里面出现的input标签，找到的是type属性为这个值的input标签
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

表单对象属性筛选器

:enabled   # 可用的标签
:disabled  # 不可用的标签
:checked   # 选中的input标签
:selected  # 选中的option标签

筛选器方法

下一个:
    $('#l3').next();  找到下一个兄弟标签
    $('#l3').nextAll(); 找到下面所有的兄弟标签
    $('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找，不包含它
上一个
    $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")

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

儿子和兄弟元素
$('ul').children(); 
$('ul').children('#l3');  # 找到符合后面这个选择器的儿子标签

$('#l5').siblings();
$('#l5').siblings('#l3'); # 找到符合后面这个选择器的兄弟标签


find
    $('ul').find('#l3')  -- 类似于  $('ul #l3')
filter过滤
    $('li').filter('#l3');


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

样式操作

样式类操作

addClass();        // 添加指定的CSS类名。
removeClass();     // 移除指定的CSS类名。
hasClass();        // 判断样式存不存在。
toggleClass();     // 切换CSS类名，如果有就移除，如果没有就添加。

$('.c1').addClass('c2');
$('.c1').addClass('c2');
$('.c1').hasClass('c2');
$('.c1').toggleClass('c2');

css样式

原生js
    标签.style.color = 'red';
jquery
    $('.c1').css('background-color','red');  
    同时设置多个css样式
    $('.c1').css({'background-color':'yellow','width':'200px'})

位置操作

查看位置
$('.c2').position();  //查看相对位置 
    {top: 20, left: 20}
$('.c2').offset();    //查看距离窗口左上角的绝对位置
    {top: 28, left: 28}
设置位置
    $('.c2').offset({'top':'20','left':'40'});

尺寸

$('.c1').height();  //content 高度
$('.c1').width();   //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度


示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 110px;
            height: 120px;
            border: 2px solid red;
            background-color: green;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>

<script src="jquery.js"></script>
</body>
</html>

文本操作

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

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

示例:
$('.c1').text('<h3>你好,少年</h3>');
$('.c1').html('<h3>你好,姑娘</h3>');

值操作

获取值
    input type='text'的标签--$('#username').val();
    input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
    input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值  
        var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
        
    单选select --- $('#city').val();
    多选select --- $('#author').val(); // ["2", "3"]  

设置值
    input type='text'的标签 --- $('#username').val('李杰');
    input type='radio'标签 ---  $('[name="sex"]').val(['3']);
    如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
    input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
    单选select --- $('#city').val('1');  option value='1'
    多选select --- $('#author').val(['2','3'])

属性操作

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

示例:
    设置单个属性
        $('.c1').attr('xx','oo');
    设置多个属性
        $('.c1').attr({'age':'18','sex':'alex'});
    查看属性
        $('.c1').attr('属性名');
        $('.c1').attr('xx');
    删除属性
        $('.c1').removeAttr('xx');

prop -- 针对的是checked\selected\disabled..

查看标签是否有checked属性,也就是是否被选中
        attr $(':checked').attr('checked'); //checked -- undefined
        prop $(':checked').prop('checked'); //true  -- false
        
        通过设置属性的方式来设置是否选中:
            $(':radio').eq(2).prop('checked',true);  true和false不能加引号
            $(':radio').eq(2).prop('checked',false);

简单总结:
    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
    具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档处理

添加到指定元素内部的后面
    $(A).append(B)// 把B追加到A
    $(A).appendTo(B)// 把A追加到B
    # 添加字符串照样能识别标签  *****
    $('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
    $(A).prepend(B)// 把B前置到A
    $(A).prependTo(B)// 把A前置到B
    示例
        $('a').prependTo($('div'));

添加到指定元素外部的后面
    $(A).after(B)// 把B放到A的后面
    $(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面
    $(A).before(B)// 把B放到A的前面
    $(A).insertBefore(B)// 把A放到B的前面
    
移除和清空元素
    remove()// 从DOM中删除所有匹配的元素。
    empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
    $('div').remove();
    $('div').empty();

替换
    replaceWith()
    replaceAll()
    示例:
        var a = document.createElement('a')
        a.href = 'http://www.baidu.com';
        a.innerText = 'xxx';
        
        $('span').replaceWith(a);
        $(a).replaceAll('span');
        
clone()克隆
    <button class="btn">屠龙宝刀,点击就送!</button> 

    $('.btn').click(function () {
        // var a = $(this).clone(); //克隆标签
        var a = $(this).clone(true);  //连带事件一起克隆
        $(this).after(a);

    })

事件

事件绑定方式

<script src="jquery.js"></script>
<script>
    //方式1
    $('#d1').click(function () {
         $(this).css({'background-color':'green'});
     });
    //方式2
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'});
    })

</script>

常用事件

click
focus
blur
change
hover
mouseenter
mouseout
mouseover
keydown
keyup  
input

// focus
// 获取光标触发的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
    });

// blur
// 失去光标(焦点)触发的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
    });

// change
//域内容发生改变时触发的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc');
    });

// hover
// 鼠标悬浮触发的事件
$('.c1').hover(
第一步:鼠标放上去
    function(){
        $(this).css({'background-color':'blue'});
    },
第二步,鼠标移走
    function(){
        $(this).css({'background-color':'yellow'});
    }
)

// mouseenter和mouseout|mouseover
// 鼠标悬浮等同于hover事件
$('.c1').mouseenter(function(){
    $(this).css({'background-color':'blue'});
});

$('.c1').mouseout(function(){
    $(this).css({'background-color':'yellow'});
});
____________________________________________________
// mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
$('.c2').mouseenter(function(){
console.log('AAA');
});

$('.c2').mouseover(function(){
console.log('BBB');
});

// keydown和keyup
// 键盘摁下和抬起触发事件 e\event事件对象
$(window).keydown(function (e) {
    console.log(e.keyCode);        // 能够获取摁键对应的值
    if (e.keyCode === 37){
            $('.c1').css({'background-color':'red'});
        }else if(e.keyCode === 39){
            $('.c1').css({'background-color':'green'});
        }
        else {
            $('.c1').css({'background-color':'black'});
        }
    })
    // 键盘抬起触发的事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })

// input
百度:<inputtype="text"id="search">

$('#search').on('input',function(){
    console.log($(this).val());
})

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
        }
        #d2{
            background-color: green;
            height: 100px;
            width: 100px;
        }

    </style>

</head>
<body>

<div id="d1">
    <div id="d2"></div>
</div>


<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function () {
        alert('子级标签');
    });
</script>
</body>
</html>

阻止后续事件发生

$('#d1').click(function () {
    alert('父级标签');
});

$('#d2').click(function (e) {
    alert('子级标签');
    return false;
    // e.stopPropagation();
});

事件委托

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <button class="c1">爱的魔力转圈圈</button>

</div>

<script src="jquery.js"></script>
<script>
    // $('.c1').on('click',function () {
    //     alert('我是一个小弹窗');
    //     var btn = document.createElement('button');
    //     $(btn).text('爱的魔力转圈圈');
    //     $(btn).addClass('c1');
    //     console.log(btn);
    //     //添加到div标签里面的后面
    //     $('#d1').append(btn);
    //
    // });

    #将'button' 选择器选中的标签的点击事件委托给了$('#d1');
    $('#d1').on('click','button',function () {
        alert('我是一个小弹窗');
        var btn = document.createElement('button');
        $(btn).text('爱的魔力转圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        console.log($(this)) //还是我们点击的那个button按钮
        //添加到div标签里面的后面
        $('#d1').append(btn);

    });
</script>
</body>
</html>

页面载入

1.js代码最好放在body标签下面或者里面的最下面
2.jQuery文件要在使用jQuery代码之前引入

// 在页面加载完成后载入
$(document).ready(function(){
    JS代码
});

// 简写
$(function(){
    JS代码
});

each循环

循环标签对象数组
$('li').each(function(k,v){
	console.log(k,v);
    console.log(k,v.innerText);
});

循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
	console.log(k,v);
})

跳出循环  return false; 类似于break
$('li').each(function(k,v){
	console.log(k,v.innerText);
	if (k === 1){
		return false;
	}
});

跳出本次循环  return; 类似于continue
$('li').each(function(k,v){
	
	if (k === 1){
		return;
	}
	console.log(k,v.innerText);
});

data

给标签对象添加数据,类似于添加了全局变量

.data(key, value): 设置值
.data(key)   取值
.removeData(key) 删除值

$("div").data("name","alex");
$("div").data("name");
$("div").removeDate("name");

插件

<script>
jQuery.extend({ //$.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
$('div').min(1,2);不能通过标签对象来调用
</script>

<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>

Jquery操作cookie

先引入jquery
再引入jquery.cookie.js 下载地址：http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

添加一个cookie

$.cookie('the_cookie', 'the_value');    # 这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

创建一个cookie，并设置过期时间7天

$.cookie('the_cookie', 'the_value', { expires: 7 });

创建一个cookie并设置cookie的有效路径

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

读取cookie

$.cookie('the_cookie');

删除cookie

$.cookie('the_cookie', null);   //通过传递null作为cookie的值即可

可选参数

$.cookie('the_cookie','the_value',{
    expires:7,         // expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期
    path:'/',          // （String）创建该Cookie的页面路径
    domain:'jquery.com',    // （String）创建该Cookie的页面域名
    secure:true             // （Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；
})