JQuery笔记

图图我呀
已于 2022-07-08 22:47:12 修改
阅读量183
点赞数
分类专栏：笔记文章标签：前端 jquery
于 2022-07-08 22:43:47 首次发布
本文链接：https://blog.csdn.net/weixin_45875814/article/details/125687201
版权
笔记专栏收录该内容
1 篇文章 0 订阅
订阅专栏
jquery笔记

JQuery框架

1.引入JQuery框架
<script type="text/javascript" src="js/jquery36.js"></script>

2.隐藏元素
$('div').hide();	//隐藏div

3.页面加载完毕执行
$(function() {
	$('div').hide();
})

jQuery(function() {
	jQuery('div').hide();
})

4.jQuery对象（伪数组）
$('div');

5.DOM对象转换为jQuery对象
$('video')[0].play()		//第一个video标签转为dom对象并调用play方法；
$('video').get(0).play()	

5.隐式迭代
$("div").css("background", "pink");	//隐式迭代将全部div背景改为粉色

6.jQuery筛选选择器
:first 		$('ul li:first')		//获取第一个ul的第一个li元素
:last 		$('ul li:last')		//获取最后一个ul的最后一个li元素
:eq(index)		$('ul li:eq(2)')		//获取第一个ul的li元素中索引号为2的li元素
:odd		$('ul li:odd')		//获取全部ul的li元素中索引号为奇数的li元素
:even		$('ul li:even')		//获取全部ul的li元素中索引号为偶数的li元素

7.jQuery筛选方法
parent()		$('li').parent();		//查找父级
children(selector)	$('ul').children('li');		//相当于$('ul>li'),最近一级子元素
find(selector)	$('ul').find('li');		//相当于$('ul li'),后代选择器
siblings(selector)	$('.first').siblings(li);		//查找兄弟节点，不包括自己本身
nextAll([expr])	$('.first').nextAll()		//查找当前元素之后的所有同辈元素
prevtAll([expr])	$('.last').prevAll()		//查找当前元素之前的所有同辈元素
hasClass(class)	$('div').hasClass('[rotected')	//检查当前的元素是否含有某个特定的类，有返回true
eq(index)		$('li').eq(2);		//相当于$('li:eq(2)'),index从0开始

8.jQuery显示元素
$('video').show()	//显示元素video

9.jQuery当前元素
$(this)

10.鼠标点击对象.click(其他事件mouseover等等用法一致)
$('button').click(function() {
                $(this).css('background', 'pink');
                $(this).siblings().css('background', '');
            })

11.css同时修改多个样式
           $('div').css({
               width: 200,
               height: 200,
               backgroundColor: "red"
           })

12.添加类(不会影响原来的类名)
$('div').addClass('current');

13.移除类(不会影响原来的类名)
$('div').removeClass('current');

14.切换类（有这个类名就移除这个类名，否则就添加这个类名）
$('div').toggleClass('current');

15.获取当前元素下标
$('div').index()
	
16.显示元素.show([speed, [easing], [fn]])	
//speed速度('slow', 'normal', 'fast')也可已用指定毫秒
//easing切换效果('swing', 'lineard')
//fu回调函数
//用1000毫秒显示元素
$('div').show(1000, function() {
	console.log('这里是显示后调用的内容')});

17.隐藏元素.hide()
$('div').hide(1000, function() {
	console.log('这里是显示后调用的内容')});

18.切换元素.toggle()(元素已显示就隐藏，已隐藏就显示)
$('div').toggle(1000);

19.元素下滑动.slideDown()	//参数和显示元素一样
$('div').slideDown();

19.元素上滑动.slideUp()
$('div').slideUp();

19.元素切换滑动.slideToggle()
$('div').slideToggle();

20.切换事件hover 
//2个函数
$('div').hover(function() {
                console.log('鼠标经过');
            }, function() {
                console.log('鼠标离开');
            });

//1个函数
$(function () {
            $('div').hover(function () {
                console.log('鼠标经过或者离开');
            });
});

21.动画停止排队.stop() (停止上一个动画,需写在动画前面)
$(this).stop().slideToggle();

22.淡入效果
$('div').fadeIn(1000);

23.淡出效果
$('div').fadeOut(1000);

24.淡出淡入切换
$('div').fadeToogle(1000);

25.不透明度fadeTo([speed, opacity, [easing], [fn]])
opacity	不透明度值0-1之间（必写）
speed	必写

26.自定义动画
animate(params, [speed], [easing], [fn])
params	更改的样式属性，以对象方式存储， 必选参数
$('div').animate({
	left: 500,
	top: 300,
	opacity: .4,
	width: 500
});

27.链式编程 
$(this).css('color', 'red').siblings().css('color', '');

28.元素自身属性操作
$('a').prop('href');			//获取自身属性
$('a').prop('title', '这是个标题')		//设置自身属性

29.自定义属性操作
$('a').attr('index', '0');			//设置自定义属性	
$('a').attr('index');			//获取自定义属性

30.数据缓存
$('span').data('uname', 'andy');		//设置缓存数据
$('span').data('uname')		//获取缓存数据

<span data-indexx='1'></span>
$('span').data('indexx')		//获取自定义属性值(如果值是数值字符串类型将获取的值为整形)

31.:checked 选择器
$('.j-checkbox:checked')		//获取被选中的元素

32.获取设置元素内容html()
$('div').html('<span>123</span>');	//设置元素内容
$('div').html();			//获取元素内容

33.获取设置文本内容text()
$('div').text('456');			//设置文本内容
$('div').text();			//获取文本内容

34.获取设置表单值
$('input').val('123');			//设置表单值
$('input').val();			//获取表单值

35.返回指定祖先元素parents
$(this).parents('.two')			//返回类名为two的祖先元素
$(this).parents()			//返回全部祖先元素

36.值修改事件change
$('this').change(function(){});		//值修改事件

37.遍历元素each

        $(function () {
            var cs = ['red', 'yellow', 'blue']
            $('span').each(function (i, DomEle) {	//i元素下标， DomEle  Dom元素
                console.log(i)
                console.log(DomEle);
                $(DomEle).css('backgroundColor', cs[i])
            });
        });


38.遍历数据$.each
	//遍历数组
            var cs = ['red', 'yellow', 'blue'];
            $.each(cs, function(i, value){
                console.log(i, value);
            });
	//遍历对象
            var obj = {'name': '王富贵', 'age': 18};
            $.each(obj, function(key, value) {
                console.log(key, value);
            });

39.创建元素
1.内部添加
var li = $('<li>我是创建的元素</li>');
$('ul').prepend(li);	添加子元素(添加到最后面)
2.外部添加
var div = $('<div>可乐</div>')
$(this).after(div)	//添加兄弟元素当前元素后面
$(this).before(div)	//添加兄弟元素当前元素前面

40.删除元素
$('ul').remove();	//删除匹配的元素
$('ul').empty();	//删除匹配元素的子节点
$('ul').html('');	//赋值方式清空匹配元素的子节点

41.jQuery 尺寸
width()/height()		//获取元素的宽度高度只包含width和height
innerWidth() / innerHeight()	//获取元素的宽度和高度包含padding
outerWidth()/ outerHeight()  	//获取元素宽度和高度值包含padding、border
outerWidth(true) /outerHeight(true)	//获取元素的宽度高度包含padding、border、margin

42.距离文档left, top
$(this).offset()	//返回left和top的对象
$(this).offset().top	//返回距离文档的top值
$(this).offset().left	//返回距离文档的left值
设置距离文档位置
$('.son').offset( {
	top: 200, 
	left: 200
})

43.获取距离带有定位父级的位置(偏移) position 无定位或者无父级以文档为准
$(this).position()	//返回left和top的对象
$(this).position().left	//返回父级带有定位的left偏移

44.页面滚动事件
$(window).scroll(function(){});

45.获取被卷去的部分
$(document).scrollTop();	//获取被卷去的头部
$(document).scrollLeft(); 	//获取被卷去的左侧

46.设置被卷去的部分
$(document).scrollTop(100);	//设置被卷去顶部的距离为100px;

47.返回顶部动画
$('body, html').stop().animate( {
                    scrollTop: 0
                });

48.绑定多个事件 .on()
//为每个对象分别绑定不同函数
        $(function () {
            $('.parent').on({
                mouseenter: function() {
                    $(this).css('background', 'hotpink');
                },
                click: function() {
                    $(this).css('background', 'skyblue');
                },
                mouseleave: function() {
                    $(this).css('background', 'pink')
                }
            });
        });

//为每个对象绑定相同函数
            $('.parent').on("mouseenter mouseleave", function() {
                console.log('enterORleave');
            })

//事件委派
            $('ul').on('click', 'li', function() {
                alert('事件委派,父元素的click事件用li触发');
            });
	//后来创建的元素也能触发
            var li = $('<li>后来创建的元素</li>');
            $('ul').append(li);

49.slideUp() 滑动隐藏被显示的元素
$(this).slideUp(100,function(){});		//用100毫秒滑动隐藏当前元素

50.slideDown();		
$(this).slideDown(100,function(){});	//用100毫秒滑动显示当前元素

51.事件解绑
$('div').off()		//解绑所有on创建的事件
$('div').off('click')		//解绑div的on创建的click事件
$('ul').off('click', 'li')		//解绑ul的li事件委派

52.只触发一次的事件
$('p').one('click', function(){
	console.log('只执行一次')
})

55.自动触发事件
$(''input).click();		//触发元素的点击事件
$('input').trigger('click');	//触发元素的点击事件
$('input').triggerHandler('click')	//触发元素的点击事件，不会触发元素的默认行为

56.jQuery事件对象
阻止默认行为:event.preventDefault()	//获取return false
阻止冒泡: event.stopPropageation()	//阻止冒泡

            $(document).on('click', function() {
                console.log('document on click');
            });
            $('div').on('click', function(event) {
                console.log('div on click');
                event.stopPropagation();	//阻止事件冒泡
            });

57.jQuery多库共存
//$符号冲突
jQuery.each();	//将$替换为jQuery

//给jQuery取别名
var jq =  jQuery.noConflict();	
jq.each();		//使用别名的方式调用方法

58.Ajax

//get请求
$.get(url, [data], [callback]);
url 要请求的资源地址
data	url携带的参数
callback	请求成功的回调函数

//不带参数的请求
$.get('http://www.liulongbin.top:3006/api/getbooks', res => {
	console.log(res);
});

//带参数 id = 1的请求
$.get('http://www.liulongbin.top:3006/api/getbooks', {id: 1}, res => {
	console.log(res);
});

//post请求
$.post(url, [data], [callback])
url 	//提交数据的地址
data	//要提交的数据
callback	//提交成功时的回调函数

//发送post请求
$.post('http://www.liulongbin.top:3006/api/addbook', {bookname: '王富贵', author: 18, publisher: '男'}, res => {
    console.log(res);
});

$.ajax()函数的语法
$.ajax( {
	type: '', 	//请求的方式，get或者post
	url: '', 	//请求的url地址
	data: {}, 	//携带的数据
	success: function(res) {}	//请求成功后的回调函数
})

//ajax发起get请求
$.ajax({
	type: 'GET',
	url: 'http://www.liulongbin.top:3006/api/getbooks',
	data: {
		id: 1
	},
	success: function(res) {
		console.log(res);
	}
});

//ajax发起post请求
$.ajax({
	type: 'POST',
	url: 'http://www.liulongbin.top:3006/api/addbook',
	data: {
		bookname: '史记',
		author: '司马迁',
		publisher: '上海图书出版社'
	},
	success: function (res) {
		console.log(res);
	}
})

59.监听表单提交事件
方法1
.submit(function(){})

$(function() {
    $('#form1').submit(function(e) {
        alert('监听到#form1表单提交事件');
    });
});

方法2
.on('submit', function(){})

$(function() {
    $('#form1').on('submit',function(e) {
        alert('监听到#form1表单提交事件');
    });
});

60.阻止表单默认提交行为
submit监听方式阻止e.preventDefault
$(function () {
    $("#form1").submit(function (e) {
        alert("阻止表单默认跳转行为!");
        e.preventDefault();
    });
});

$(function () {
    $('#form1').on('submit', function (e) {
        alert('阻止表单默认提交行为');
        e.preventDefault();
    })
});

61.快速或者表单中的数据
$('#form1').serialize()

$(function () {
    $('#form1').on('submit', function (e) {
        alert('阻止表单默认提交行为');
        e.preventDefault();
        console.log($('#form1').serialize());	//serialize()函数快速或者表单中的数据（需给表单元素添加name属性）
    console.log($(this).serialize());	
})
});

62.清空表单内容
$('#formAddCmt')[0].reset();	//dom元素方法

63.模板引擎	art-template
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
    <script src="./js/lib/jquery360.min.js"></script>
    <script src="./js/template-web.js"></script>	//模板引擎脚本

    <div id="container">

    </div>

    <!-- 定义模板 -->
    <script type="text/html" id="demo">
        <span>{{name}}</span>
        <span>{{age}}</span>
    </script>
    <script>
        // 定义要渲染的数据
        var data = {name: '王富贵', age: 18}
        //  使用模板
        var html_str = template('demo', data);
        console.log(html_str);
        //渲染HTML结构
        document.querySelector('#container').innerHTML = html_str;
    </script>

//模板引擎标准语法		原文输出(html)
{{@ value}}
    <script type="text/html" id="demo">
        <span>{{name}}</span>
        <span>{{age}}</span>
        <span>{{li}}</span>
        <span>{{@ li}}</span>
    </script>
    <script>
        // 定义要渲染的数据
        var data = {name: '王富贵', age: 18, li: "<li>Item</li>"}
        //  使用模板
        var html_str = template('demo', data);
        console.log(html_str);
        //渲染HTML结构
        document.querySelector('#container').innerHTML = html_str;
    </script>

//模板引擎标准语法		条件输出
{{if age == 17}}		//条件判断
	age是17	
{{/if}}
    <script type="text/html" id="demo">
        {{if age == 17}}
            age是17
        {{else if age == 18}}
            age是18
        {{else}}
            age不是17和18
        {{/if}}
    </script>

//模板引擎标准语法		循环输出
//循环输出 $index访问索引，value访问值
{{each hobby}}
	{{$index}} {{$value}}
{{/each}}

<script type="text/html" id="demo">
        {{each hobby}}
            <li>索引是:{{$index}} 值是:{{$value}}<li>
        {{/each}}
    </script>
    <script>
        // 定义要渲染的数据
        var data = {name: '王富贵', age: 20, li: "<li>Item</li>", hobby: ['吃饭', '睡觉', '打豆豆']}
        //  使用模板
        var html_str = template('demo', data);
        console.log(html_str);
        //渲染HTML结构
        document.querySelector('#container').innerHTML = html_str;
    </script>

//模板引擎	过滤器
{{value | fun}}	//value键值，fun过滤器函数(将value作为参数传递)
<!-- 定义模板 -->
    <script type="text/html" id="demo">
        {{Nowtime | filterAge}}

    </script>
    <script>
        // 定义要渲染的数据
        var data = {name: '王富贵', age: 20, li: "<li>Item</li>", hobby: ['吃饭', '睡觉', '打豆豆'], Nowtime: new Date()}
        //处理时间过滤器
        template.defaults.imports.filterAge = function(date) {
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            let d = date.getDate();
            return `${y}-${m}-${d}`
        }
        //  使用模板
        var html_str = template('demo', data);
        console.log(html_str);
        //渲染HTML结构
        document.querySelector('#container').innerHTML = html_str;
    </script>


//AJAX上传文件

$(function () {
    let btn_upload = $("#btn_upload");
    let file = $("#select_file");
    let loading_img = $("#loading_img");
    let load_progress = $("#loading_img span:first");
    let formdata = new FormData();

    //ajax请求开始事件
    $(document).ajaxStart(function() {
        loading_img.show();
    })
    //ajax请求结束事件
    $(document).ajaxStop(function() {
        loading_img.hide();
    })

    btn_upload.on("click", function () {
        //获取选择的文件列表
        let fs = file[0].files;
        if (fs.length > 0) {
            //添加第一个选择的文件
            formdata.append("avatar", fs[0]);
            upload_file(formdata);
        } else {
            return alert("请选择文件!");
        }
    })

    function upload_file(dataform) {
        $.ajax({
            method: "POST",
            url: "http://www.liulongbin.top:3006/api/upload/avatar",
            data: dataform,
            //不修改Content-Type属性，使用FormData默认的Content-Type值
            processData: false,
            //不对FormData中的数据镜像编码，将FormData原样发送到服务器
            contentType: false,
            success: function (res) {
                console.log(res);
            }
        })
    }

});	

//发送JSONP请求
$.ajax({
            url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20',
            //jsonp请求
            dataType: 'jsonp',
            //发送到服务器端参数的名称默认值为callback
            jsonp: 'callback',
            //自定义的回调函数名称，默认值为jquery+随机值
            jsonpCallback: 'abc',
            success: function(res) {
                console.log(res);
            }
        })