jQuery

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量71 收藏
点赞数
分类专栏： 我的笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43870744/article/details/119770976
版权

文章目录

杂

str.replace(/^\s+|\s+$/g,''); //字符串去空格




$('li').eq(0) //会继续包装成jq对象返回
$('li').get(0) //会直接返回元素

$('li').hover(function(){
    $(this).css({
        display : block,  //this指向当前触发的li
        backgroude : red
    })


    $(this).index()  //返回this在当前兄弟们中的排名 0开始



    $(this).siblings()  //返回剩下的兄弟元素


})


$("div").children()

$("div").children(".selected")

回调函数嵌套 动画队列

<div class='ad'></div>


//嵌套
$('.ad').stop().slideDown(1000,function(){
    $(this).fadeOut(1000,function(){
        $(this).fadeIn(1000);
    })
});



//队列
$('.ad').stop()
$('.ad').slideDown(1000);
$('.ad').fadeOut(1000);
$('.ad').fadeIn(1000);


$('.ad').stop().slideDown(1000).fadeOut(1000).fadeIn(1000);

一

jQuery原理

环境

function one(){
    var a = 10;
    console.log(a);
}
function two(){
    var b = 20;
    console.log(b);
}
one();
two();
        互不冲突
        所以可以直接

(function one(){
    var a = 10;
    console.log(a);
}())


(function two(){
    var b = 20;
    console.log(b);
}())







//以下为环境
(function(window,undefined){

var jQuery = function(selector){
	return new jQuery.prototype.init(selector);
}
jQuery.prototype = {
	constructor : jQuery,
	init : function(selector){

	}
}


jQuery.prototype.init.prototype = jQuery.prototype;

window.jQuery = window.$ = jQuery;

}(window))

console.log(jQuery(null))

"" null undefined NaN 0 false 返回空的jQuery对象

(function(window,undefined){

var jQuery = function(selector){
	return new jQuery.prototype.init(selector);
}
jQuery.prototype = {
	constructor : jQuery,
	init : function(selector){

		if (!selector) {	//"" null undefined NaN 0 false 返回空的jQuery对象
			return this;
		}

	}
}


jQuery.prototype.init.prototype = jQuery.prototype;

window.jQuery = window.$ = jQuery;

}(window))

console.log(jQuery(null))	//"" null undefined NaN 0 false 返回空的jQuery对象

$("<p><p></p></p><p><p></p></p>") 字符串代码片段如何返回



(function(window,undefined){

var jQuery = function(selector){
	return new jQuery.prototype.init(selector);
}
jQuery.prototype = {
	constructor : jQuery,
	init : function(selector){

		if (!selector) {	//"" null undefined NaN 0 false 返回空的jQuery对象
			return this;
		}else if(typeof(selector) === 'string'){	//判断是否是字符串
			//是否是代码片段 尖括号
			if (selector.charAt(0) == '<' && selector.charAt(selector.length - 1) == '>' && selector.length >= 3) {
				// 根据代码片段创建所有的元素
				var temp = document.createElement('div');
				temp.innerHTML = selector;
				// 创建好的一级元素添加到jQuery当中  console.log($(<div><p></p></div><div><p></p></div>)) 会返回对象里2个div
				for (var i = 0; i < temp.children.length; i++) {
					this[i] = temp.children[i];
				}
				this.length = temp.children.length;
				return this;
				// 添加length属性
				// 返回加工好的this(jQuery)
			}
			//是否是选择器
		}



	}
}


jQuery.prototype.init.prototype = jQuery.prototype;

window.jQuery = window.$ = jQuery;

}(window))

// console.log(jQuery(null))	//"" null undefined NaN 0 false 返回空的jQuery对象



console.log($('<p><p></p></p><p><p></p></p>'))
console.log($('<div><p></p></div><div><p></p></div>'))

未更进 (未完成)

(function(window,undefined){

var jQuery = function(selector){
	return new jQuery.prototype.init(selector);
}
jQuery.prototype = {
	constructor : jQuery,
	init : function(selector){

		//去除字符串连孤单空格
		jQuery.trim(selector);

		if (!selector) {	//"" null undefined NaN 0 false 返回空的jQuery对象

			return this;

		}else if(jQuery.isString(selector)){	//判断是否是字符串

			//是否是代码片段 尖括号
			if (jQuery.isHTML(selector)) {
				// 根据代码片段创建所有的元素
				var temp = document.createElement('div');
				temp.innerHTML = selector;


				// // 创建好的一级元素添加到jQuery当中  console.log($(<div><p></p></div><div><p></p></div>)) 会返回对象里2个div
				// for (var i = 0; i < temp.children.length; i++) {
				// 	this[i] = temp.children[i];
				// }
				// // 添加length属性
				// this.length = temp.children.length;
				// // 返回加工好的this(jQuery)
				
				[].push.apply(this,temp.children)

				return this;
			}
			//是否是选择器
		}



	}
}

jQuery.isString = function(str){
	return typeof(str) === 'string';
}
jQuery.isHTML = function(str){
	return str.charAt(0) == '<' &&
	str.charAt(str.length - 1) == '>' &&
	str.length >= 3
}
jQuery.trim = function(str){	//去前后空格
	// if (str.trim) {
	// 	return str.trim();
	// }else{
		str.replace(/^\s+|\s+$/g,''); //全局匹配前面的空格后面的空格
	// }
}



jQuery.prototype.init.prototype = jQuery.prototype;

window.jQuery = window.$ = jQuery;

}(window))




console.log(jQuery(null))	//"" null undefined NaN 0 false 返回空的jQuery对象
console.log($(   '<p><p></p></p><p><p></p></p>'   ))
console.log($(        '<div><p></p></div><div><p></p></div>'  ))

理论

jq支持链式操作

jq的这个语法不会等图片加载完 而onload会

window.onload = function(){

}

原生固定写法
$(document).ready(function(){
    
});

弹出

window.onload = function(){
    console.log(123);
}

window.onload = function(){ //会覆盖之前的所以输出234
    console.log(234);
}


$(document).ready(function(){
        console.log(123);
});

$(document).ready(function(){ //后写的不会覆盖先写的的
        console.log(234);
});

写法

$(document).ready(function () {
    
});

jQuery(document).ready(function () {
    
});

$(function () {         //推荐第三种写法  入口函数
    
});

jQuery(function(){

});

冲突问题

$(function(){

})

在引入一个js文件也有$会冲突
jQuery.noConflict(); //释放$使用权

释放操作必须在编写其他jq代码之前编写

释放以后不能用$
jQuery(function(){

});

自定义一个

var abc = jQuery.noConflict();

abc(function(){

});

二

核心函数

正常的函数调用
function a(){}
a();

所以
$();  //就代表调用jq核心函数




var $li = $('<li>abc</li>');
$('ul').append($li);





<div class='box1'></div>
<div id='box2'></div>
<span></span>

$(function(){ //接收一个函数
    alert('hello');

    var $box1 = $('.box1'); //字符串选择器 返回jq对象 对象中保存了找到的dom元素
    var $box2 = $('#box2');

    var $p = $('<p>我是段落</p>') //代码片段 返回jq对象 对象中保存了创建的dom元素
    $box1.append($p);

    var span = document.getElementsByTagName('span')[0];
    console.log(span);

    var $span = $(span); //这里没‘’是因为上面的span为document.getElementsByTagName('span')[0];
    console.log($span); //会被包装成jq对象返回给我们 接收一个dom元素

})

接受一个字符串（字符串选择器，代码片段，DOM元素）

jq对象

<div>div1</div>
<div>div2</div>
<div>div3</div>



$(function(){
    var $div = $('div');
    //jq对象是一个类数组(伪数组) 有length 也有对应的量就是伪数组
})

静态方法


function AClass(){}     //定义一个类

AClass.staticMethod = function(){      //直接给类添加的就是静态方法
    alert('hello');
}

AClass.staticMethod();




AClass.prototype.instaticMethod = function(){ //给这个类添加实例(对象)方法
    alert('hello');
}

var a = new AClass();   //创建一个实例(创建一个对象)
a.instaticMethod();    //通过实例调用实例方法(通过对象调用对象方法)
each方法遍历数组

原生js

var arr = [1,2,5,7,9];
var obj = {
    0:1,
    1:3,
    2:5,
    3:7,
    4:9,
    length:5
}
arr.forEach(function(value,index){
    console.log(index,value);   //原生forEach只能遍历数组，不能遍历伪数组
})

利用jq的each静态方法遍历数组


var arr = [1,2,5,7,9];

var obj = {
    0:1,
    1:3,
    2:5,
    3:7,
    4:9,
    length:5
}

var res = $.each(arr,function(index,value){   //1参数当前遍历到的索引 2遍历到的元素
    console.log(index,value);       //jq的each是可以遍历伪数组的
})
遍历谁res就是谁 jq的each返回当前遍历的数组 不支持内部return
map方法遍历数组 和当前被遍历的数组

原生js

var arr = [1,2,5,7,9];
var obj = {
    0:1,
    1:3,
    2:5,
    3:7,
    4:9,
    length:5
}
arr.map(function(value,index,array){    //1参数当前遍历到的元素 2遍历到的索引 3当前被遍历的数组
    console.log(index,value,array);   //原生map只能遍历数组，不能遍历伪数组
})

利用jq的each静态方法遍历数组


var arr = [1,2,5,7,9];

var obj = {
    0:1,
    1:3,
    2:5,
    3:7,
    4:9,
    length:5
}


$.map(arr,function(value,index){   //1参数当前遍历到的索引 2遍历到的元素
    console.log(index,value);       //可以遍历伪数组
})

返回值是空数组 支持内部return
trim去除字符串两端空格
var str = "    lnj    ";

var res = $.trim(str); //返回值为去除字符串两端的空格

console.log(res); //去空格以后的值
isWindow isArray isFunction

var arr = [1,2,5,7,9];
var obj = {'name':'li'}
var w = window;
var fn = function(){};


var res = $.isWindow(w); //返回值为 判断是否为window 是为true


var res = $.isArray(arr); //返回值为 判断是否为数组 是为true


var res = $.isFunction(f); //jQuery本质就是一个立即执行函数所以 传jQuery也为true
$.holdReady(true) 暂停/恢复ready事件

ready默认等dom加载完就会执行
有时候想要别的框架也加载完
或者图片也加载完在执行

<button>恢复ready事件</button>

<script>
    $.holdReady(true);
    $(document).ready(function(){
        alert('ready');
    });


    var btn = document.getElementsByTagName('button')[0];
    byn.onclick = function(){
        $holdReady(false);
    }
</script>

实例方法

文档处理

内部插入 append最后 prepend最前 (content) || (content|fn)

append(content|fn)

var $li = $('<li>abc</li>');    //在指定元素内部的最后元素添加
$('ul').append($li);               $('li').append($('p'));//或者标签



prepend(content|fn)

var $li = $('<li>abc</li>');    //在指定元素内部的最前面元素添加
$('ul').append($li);                $('li').preend($('p'));//或者标签








appendTo(content)

var $li = $('<li>abc</li>');        //元素添加在指定元素内部的最后面
$li.appendTo('ul');                         //或者标签



prependTo(content)

var $li = $('<li>abc</li>');        //元素添加在指定元素内部的最前面
$li.prependTo('ul');                        //或者标签

外部插入 after before || insertAfter/Before || (content|fn)/(content)

after(content|fn)

var $div = $('<div>abc</div>');     //在指定元素的外部的后面添加
$('div').after($div);                   //或者标签




before(content|fn)

var $div = $('<div>abc</div>');     //在指定元素的外部的前面添加
$('div').after($div);                   //或者标签












insertAfter(content)

var $div = $('<div>abc</div>');     //在指定元素的外部的后面添加
$div.insertAfter('div');                //或者标签



insertBefore(content)               //或者标签

删除 remove(类名) detach(类名) empty()


$('div').remove() //删除指定元素    这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

$('div').remove('.container')  //删除div中有对应class类的元素

$('div').detach()   //与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$('div').detach('.container')  //删除div中有对应class类的元素






$('div').empty()       //删除匹配的元素集合中所有的子节点。 (包括文本节点)

替换 replaceWith

replaceWith(content|fn)     //将所有匹配的元素替换成指定的HTML或DOM元素。

$('.div1').replaceWith($('.div3'));  //比如有三个div123  1替换3会把1移动到3位置 用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。把3删除
$('li').replaceWith('<p>替换</p>');     //直接替换标签和内容








replaceAll(selector)  //用匹配的元素替换掉所有 selector匹配到的元素。
('<p>替换</p>').replaceWith('li');

复制节点

[Even[,deepEven]]
1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

浅复制false
$("b").clone(false).prependTo("p");          V1.5以上版本默认值是：false          



深复制
$('button').click(function(){
    $(this).clone(true).insertAfter(this);
})

筛选

过滤

查找

find()后代元素

选择器

内容

:empty 找到内容为空的 既没有子元素也没有文本内容
<div></div>
<div>我是div</div>
<div>div2</div>
<div><span></span></div>

<script>

var $div = $('div:empty'); //找到内容为空的 既没有子元素也没有文本

</script>
:parent 找到有文本内容或子元素的
<div></div>
<div>我是div</div>
<div>div2</div>
<div><span></span></div>

<script>
    
var $div = $('div:parent'); //找到内容为空的 既没有子元素也没有文本

</script>
:contains(‘文本’) 找到包含指定文本内容的 包含包含包含
<div></div>
<div>我是div</div>
<div>div2</div>
<div><span></span></div>

<script>
    
var $div = $("div:contains('我是div')"); //找到包含文本内容的div 包含包含包含

</script>
:has(‘标签’) 找到包含指定子元素的 包含包含包含
<div></div>
<div>我是div</div>
<div>div2</div>
<div><span></span></div>

<script>
    
var $div = $("div:has('span')"); //找到包含子元素为标签的 包含包含包含

</script>

四 属性

属性 对象身上保存的就是属性 ele[attr];获取属性 ele[attr]=value;设置属性

对象身上保存的就是属性
操作就是调用

prop removeProp 除了操作属性还能操作属性节点
<span class='span1' name='it666'></span>
<span class='span2' name='lnj'></span>

<script>
    $('span').eq(0).prop('demo','lnj');    //有新增没有修改
    $('span').eq(0).prop('demo','it666');

    $('span').prop('demo')      //返回找到的第一个




    $('span').removeProp('demo'); //删除所有dom元素下的demo属性






    //既然能够操作元素属性 那么也能操作元素的属性节点比如attribute
    $('span').prop('class','box'); //改为box
    $('span').removeProp('class'); //不能删除多个 再写一行也不行

</script>

属性节点 只有dom元素有属性节点 在html添加的属性就是属性节点保存在attributes ele.setAttribute(attr,value);设置属性节点

标签当中添加的就是属性节点
在attribute当中都是属性节点

<span></span>

<script>
    var span = document.getElementsByTagName('span')[0];
    span.setAttribute('name','lnj');
    span.getAttribute('name','it666');
</script>
attr() 新增/获取/设置属性节点的值 1个参数获取 2个参数设置 没有的参数新增
<span class='span1' name='it666'></span>
<span class='span2' name='lnj'></span>

<script>
    $('span').attr('class');    //无论找到几个元素 指挥返回第一个元素指定的属性节点值
    $('span').attr('class'，'box'); //获取找到多少个就会设置多少个
    $('span').attr('abc'，'123'); //没有的话会新增
</script>
removeAttr() 删除属性节点
<span class='span1' name='it666'></span>
<span class='span2' name='lnj'></span>

<script>
    $('span').removeAttr('class name');    //删除所有找到的 空格隔开则都删除
</script>
上面两个区别
<div class="122" i="222"></div>
<div class="jijiji" i='223'></div>

$('div').removeProp('class'); //class为undefined

$('div').removeAttr('class'); //直接没有class属性







<input type='checkbox' checked> //<input type='checkbox' checked> 选中框

$('input').prop('checked') //返回true/false

$('input').attr('checked') //返回checked/undefined

现在让你判断选中框是否被选中 true 就选中 false 就没选中

返回 checked/undefined 就比较麻烦


所以checked(选择框)，selected(下拉选中框)，disabled(禁用框) 使用prop()   其他使用 attr()

css类 属性 add/remove/toggle Class 添加/删除/切换 类


<style>

    .class1{
        width:100px;
        height:100px;
        background-color:red;
    }
    .class2{
        border:10px solid black;
    }
</style>



<button>添加</button>
<button>删除</button>
<button>切换</button>
<div></div>




<script>
    var bts = document.getElementsByTagName('button');
    bts[0].onclick = function(){
        $('div').addClass('class1 class2'); //多个用空格隔开
    }

    bts[1].onclick = function(){
        $('div').removeClass('class2 class1'); //多个空格隔开
    }

    bts[2].onclick = function(){ //有就删除，没有就添加
        $('div').toggleClass('class1 class2');
    }
</script>

html代码/文本/值

<style>

    .class1{
        width:100px;
        height:100px;
        background-color:red;
    }
    .class2{
        border:10px solid black;
    }
</style>


<button>设置html</button>
<button>获取html</button>

<button>设置text</button>
<button>获取text</button>

<button>设置value</button>
<button>获取value</button>

<div></div>
<input>


<script>
    var bts = document.getElementsByTagName('button');
    bts[0].onclick = function(){
        $('div').eq(0).html('<p>我是段落<span>我是span</span></p>'); //和元素innerHTML一样
    }
    bts[1].onclick = function(){
        console.log($('div').eq(0).html());      //拿到写的东西 和元素innerHTML一样
    }


    bts[2].onclick = function(){
        $('div').eq(0).text('<p>我是段落<span>我是span</span></p>'); //和元素innerTEXT一样  以这种形式表达&lt;p&gt;我是段落&lt;span&gt;我是span&lt;/span&gt;&lt;/p&gt;
    }
    bts[3].onclick = function(){
        console.log($('div').eq(0).text());     //获取文本值
    }


    bts[4].onclick = function(){
        $('input').val('请输入内容');         //修改value
    }
    bts[5].onclick = function(){
        console.log($('input').val());      //获取value
    }
</script>

CSS

css

$(function(){

                                //逐个设置      Color或者-color
    $('div').css('width','100px');
    $('div').css('height','100px');
    $('div').css('background','red');


                                //jq支持链式设置
                                //如果大于三步建议分开      Color或者-color
    $('div').css('width','100px').css('height','100px').css('background','red');


                        //批量设置 传对象
    $('div').css({
        width : '100px',
        height : '100px',
        backgroundColor : 'red'
    });






            //获取值    不能链式
    console.log($('div').css('backgroundColor'));   //Color或者-color

})

尺寸 位置

获取/设置 元素尺寸
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>


var bts = document.getElementsByTagName('button');
bts[0].onclick = function(){
    console.log($('.father').width()); //200px 设置多少就是多少
}



bts[1].onclick = function(){
    $('.father').width('500px') //改变

    //同理有height
    //innerWidth   获取第一个匹配元素内部区域高度（包括补白、不包括边框）。
    //innerHeight
}   //outerWidth([options])  获取第一个匹配元素外部高度（默认包括补白和边框）。设置为 true 时，计算边距在内。例如： p.outerWidth(true)
    //outerHeight([options])
获取/设置 元素位置 滚动条
<div class="father">
    <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>

                                            //.offset() 获取距离窗口的偏移位
var bts = document.getElementsByTagName('button');
bts[0].onclick = function(){
    console.log($(.son).offset()) //返回一个对象 top : 8 , left : 8    
    console.log($(.son).offset().left) //返回值
}



bts[1].onclick = function(){
    $(.son).offset({
        left : '10px'       //改值
    })








                                        // position获取距离定位父元素的偏移值
var bts = document.getElementsByTagName('button');
bts[0].onclick = function(){
    console.log($(.son).position()) //返回一个对象 top : 0 , left : 0    
    console.log($(.son).position().left) //返回值
}



bts[1].onclick = function(){
    $(.son).position({
        left : '10px'       //无效 无法设置
    })

滚动条

                //scrollTop获取匹配元素相对滚动条顶部的偏移。
<div class="father"></div>


console.log($('.father').scrollTop());  //获取值 不写top获取对象值
console.log($(window).scrollTop());     //body  html            兼容ie写法console.log($('html').scrollTop() + $('body').scrollTop());






$('.father').scrollTop(500);  //设置滚动条滚动到.father内部的500处

$('html').scrollTop(500)        //兼容ie写法$('html,body').scrollTop(500)
$('body').scrollTop(500)
$(window).scrollTop(500)

事件

eventName(fn); on(eventName,fn); 两种方式

<button>我是按钮</button>



$('button').click(function(){   //推荐第一种 查错容易 写的快
                                //部分事件jq没有实现
});                             //可以添加多个 相同/不相同 类型的的事件不会覆盖



$('button').on('click',function(){ //所有js事件都能绑定
                                   //可以添加多个 相同/不相同 类型的的事件不会覆盖
});

off() 事件解绑/移除

<button>我是按钮</button>




function test(){alert('test')}
function hello(){alert('hello')}
$('button').click(test);                             

$('button').on('mouseenter',hello);



$('button').off();          //不传参代表移除所有参数

$('button').off('click');  // 1个参数移除所有指定的事件

$('button').off('click',test); //移除类型的指定事件

事件冒泡 returnfalse event.stopPropagation();


<style>
    *{
        margin:0;
        padding:0;
    }
    .father{
        width:200px;
        height:200px;
        background-color:red;
    }
    .son{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>






<div class='father'>
    <div class='son'></div>
</div>




<script>
    $('.son').click(function(){  //子元素被定义了点击事件   当点击子元素时会冒泡到父元素触发父元素的点击事件
        alert('son');
    })
    $('.father').click(function(){  //父元素也被定义了点击事件
        alert('father');
    })
</script>



<script>
    $('.son').click(function(event){
        alert('son');
        return false;           //return false 则不会冒泡
        event.stopPropagation();  //这个方法也不会冒泡
    })
</script>

默认行为 returnfalse event.preventDefault();


<a href='https://www.baidu.com'>我是百度</a>
<form action='https://www.baidu.com'>
    <input type='text'>
    <input type='submit'>
</form>


                        


<script>                //a有默认事件 点击转跳
    $('a').click(function(event){
        alert('注册框');
        return false;       //写了的话弹出注册框后就不会转跳百度
        event.preventDefault(); //这种写法直接阻止默认行为
    })
</script>

事件自动触发 元素.trigger(事件) triggerHandler

<style>
    *{
        margin:0;
        padding:0;
    }
    .father{
        width:200px;
        height:200px;
        background-color:red;
    }
    .son{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>


<div class='father'>
    <div class='son'></div>
</div>





<script>
    $('.son').click(function(){
        alert('helloson')
    })

    $('.father').click(function(){
        alert('hello');
    })

    $('.father').trigger('click');          //自动触发 但是会引起冒泡
    $('.father').triggerHandler('click');   //自动触发 不会触发冒泡
</script>






<a href='https://www.baidu.com'>我是百度</a>
<form action='https://www.baidu.com'>
    <input type='text'>
    <input type='submit'>
</form>



<script>
    $("input[type='submit']").click(function(){
        alert('submit');
    })
    $("input[type='submit']").trigger('click');         //如果自动触发 也会触发默认行为
    $("input[type='submit']").triggerHandler('click');  //不会触发默认行为
</script>

面试题

<a href='https://www.baidu.com'>我是百度</a>

<script>

$('a').click(function(){
    alert('你点击了a标签');
})
$('a').trigger('click'); //  a标签比较特殊只会弹不会转跳

</script>




<a href='https://www.baidu.com'><span>我是百度</span></a>

<script>
$('span').click(function(){     //这里监听span让他冒泡到a
    alert('你点击了a');
})

$('span').trigger('click');     //点击span冒泡到a
</script>

自定义事件 想要自定义必须通过on绑定 必须通过trigger触发

<style>
    *{
        margin:0;
        padding:0;
    }
    .father{
        width:200px;
        height:200px;
        background-color:red;
    }
    .son{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>


<div class='father'>
    <div class='son'></div>
</div>





<script>

    $('.son').on('myClick',function(){      //想要自定义必须通过on绑定  必须通过trigger触发
        alert('我是son');
    });

    $('.son').trigger('myClick');


</script>

事件命名空间 命名的前提是用on添加

<style>
    *{
        margin:0;
        padding:0;
    }
    .father{
        width:200px;
        height:200px;
        background-color:red;
    }
    .son{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>


<div class='father'>
    <div class='son'></div>
</div>





<script>    //我给.son添加了click事件   张三也给.son添加了click

    $('.son').on('click.zs',function(){      //命名的前提是用on添加 张三添加
        alert('我是son');
    });

    $('.son').on('click.ls',function(){      //命名的前提是用on添加 李四添加
        alert('我是son');
    });




    $('.son').trigger('click.zs');  //通过trigger或triggerHandler触发

</script>

事件命名空间面试题

<style>
    *{
        margin:0;
        padding:0;
    }
    .father{
        width:200px;
        height:200px;
        background-color:red;
    }
    .son{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>


<div class='father'>
    <div class='son'></div>
</div>





<script>    
    $('.father').on('click.ls',function(){      
        alert('fatherls');
    });

    $('.father').on('click',function(){      
        alert('father');
    });

    $('.son').on('click.ls',function(){
        alert('sonclickls');
    })


    $('.son').trigger('click.ls')   //利用trigger触发带命名空间的子元素，带相同命名的父元素也会被触发
                                    //没有命名空间的不会被触发

    $('.son').trigger('click')      //子父元素相同事件的都会被触发 不管有没有命名空间
</script>

事件委托 .delegate(子元素，事件，方法函数)

    <ul>
        <li>我是第一个</li>
        <li>我是第二个</li>
        <li>我是第三个</li>
    </ul>
    <button>新增一个li</button>



    $('button').on('click',function(){
        $('ul').append('<li>我是新增的li</li>');
    })

    //如果通过核心函数找到的元素不止一个，那么在添加事件的时候会遍历所有的元素，给所有的元素添加
    $('ul>li').click(function(){
        console.log($(this).html()); //会输出当前点击的li内容（则不包括新增的 因为拿到所有元素就开始执行 添加是后添加的）
    })




    找一个页面加载时就有的元素委托你以后新增的元素
    如果新增野要响应，则使用事件委托
    $('ul').delegate('li','click',function(){   //把li的click事件委托给ul
        console.log($(this).html());
    })

事件事件事件事件事件事件

移入移出 .hover mouseenter mouseleave
和上面一样的father son结构

$('.father').mouseover(function(){      //.mouseover  .mouseout 子元素移入移出也会影响父元素
    console.log('你被移入了');
})
$('.father').mouseout(function(){
    console.log('你被移出了');
})




$('.father').mouseenter(function(){      //mouseenter  .mouseleave 子元素移入移出不会触发父元素的事件
    console.log('你被移入了');
})
$('.father').mouseleave(function(){
    console.log('你被移出了');
})



$('.father').hover(function(){},function(){})       //第一个参数移入    第二个参数移出
$('.father').hover(function(){})            //一个参数 既监听移入也监听移出





li 10 个
$('li').hover(function(){  //this那个li移入就触发  谁触发this就是谁
    $(this).addClass('son');
},function(){
    $(this).removeClass('son');
})


$('li').hover(function(){  
    console.log($(this).index()); //this在他兄弟元素中排第几
},function(){

})
监听滚动事件 $(window||element).scroll
$(window).scroll(function () { 
    var $offset = $('html,body').scrollTop();

    if($offset > 350){
        $('img').show(1000);
    }else{
        $('img').hide(1000);
    }
});

动画 效果 jQuery animate easing全支持

.stop();

管道里放球  先进的先出 后进的后出
你设定了1秒 一直触发 相当于往动画队列里放好多的动画 前面的做不完 后面的就等着

三参数或者二参数 也可以直接调用stop()

stop()              清空队列，当前执行动作立即停止。后续动作会不再执行。
// stop(true)       清空队列，当前执行动作立即停止。后续动作会不再执行。
stop(true,true)     清空队列，当前执行动作立即完成。后续动作会不再执行。
// stop(true,false)清空队列，当前执行动作立即停止。后续动作会不再执行。



stop(false)         不清空队列，当前执行动作立即停止。后续动作会立即执行。
stop(false,true)    不清空队列，当前执行动作立即完成。后续动作会不再执行。
// stop(false,false)不清空队列，当前执行动作立即停止。后续动作会立即执行。


clearQueue:如果设置成true，则清空队列。可以立即结束动画。stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。goToEnd	可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

delay(毫秒,[队列名词，默认是Fx，动画队列。])

$('div').slideDown(1000,function(){}) 
$('div').delay(800);            //等待800毫秒
$('div').slideUp(1000,function(){}) 



$('button').eq(2).click(function (e) { 
    $('.one').animate({
        width : 200,
    },1000).delay(800).animate({
        height : 400,
    },1000);
});

基本 显示隐藏 show(时间，回调函数) hide() toggle()

xy轴 展开

$('div').show(1000,function(){})   //1000毫秒 fn动画执行完毕后调用    无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

$('div').hide(1000,function(){})   //1000毫秒 fn动画执行完毕后调用

$('div').toggle(1000,function(){})    //如果显示就隐藏 隐藏就显示

滑动 展开隐藏 slideDown slideUp .slideToggle

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。


$('div').slideDown(1000,function(){}) 

$('div').slideUp(1000,function(){}) 

$('div').slideToggle(1000,function(){})

淡入淡出 fadeIn(时间,动画效果(可省略)，回调函数) fadeOut() fadeTo(999,透明度0.25,动画效果(可省略),fn) .fadeToggle 都可以写回调函数

自定义 自定义 animate(对象{可以修改属性}，时间，回调函数) width : 500没有px width:’+=200’累加

<button>操作</button>
<button>累加</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>




$('button').eq(0).click(function (e) { 

    $('.one').animate({
        marginLeft : 500,
    },1000,'linear',function(){});  //运动动画
    
});

$('button').eq(1).click(function (e) {

    $('.one').animate({
        width : '+=100',            //累加
    },1000,'linear',function(){});

});

$('button').eq(2).click(function (e) { 

    $('.one').animate({
        width : 'hide',     //toggle           //关键字
    },1000,'linear',function(){});
    
});

设置 动画帧率jQuery.fx.interval = 100; 和 立即关闭页面上所有的动画jQuery.fx.off = true;

jQuery.fx.off = true; //开启立即关闭页面上所有的动画
把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：

* 你在配置比较低的电脑上使用jQuery。

* 你的一些用户由于动画效果而遇到了 可访问性问题

当把这个属性设成false之后，可以重新开启所有动画





jQuery.fx.interval = 100;  越小越流畅
帧速设置为100ms

拷贝

深浅拷贝

浅拷贝对象 复杂数据类型会相同指向 修改会一起修改 会覆盖

var targetObj = {
    //如果原来targetObj有id会被覆盖
    //有mag也会覆盖
}

var obj = {
    id:1,
    name:"andy"，
    mag : {
        age:18
    }
}
// $.extend(target,obj);
$.extend(targetObj,obj);












深拷贝 完全分离拷贝 不会覆盖会共存 同样的会覆盖
var targetObj = {
    id :123,
    msg:{
        sex:123
    }
}

var obj = {
    id:1,
    name:"andy",
    msg:{
        sex:1,
        age:1
    }
}


$.extend(true,targetObj,obj);

多库共存

$换为jQuery


替换
var some = $.noConflict();
some("div");

尺寸，位置操作

尺寸


$("div").width();  //height()   取得匹配元素宽度和高度 只算width height


$("div").innerWidth();  //取得匹配元素包含padding的宽高


$("div").outerWidth();  //取得匹配元素包含padding border的宽高


$("div").outerWidth(true);  //取得匹配元素包含padding border margin的宽高

位置

元素距离文档/父元素的位置

$("div").offset();  //返回元素距离文档的位置(偏移)
$("div").offset().top
$("div").offset().left
// 修改
$("div").offset({
    top:200,
    left:200
});





$("div").position();    //这个方法只能获取不能设置偏移 position
                        //返回距离带有定位的父元素的偏移
$("div").position().top

设置获取元素被卷去的头部和左侧


获取文档滚动的距离

$(window).scroll(function(){
    console.log($(document).scrollTop());
})






$("div").scrollTop();   //获取top被卷去了多少



$("div").on("click",function(){     //设置回顶部
    $(document).scrollTop(0);       //但是没有动画
})




//animate动画函数有scrollTop属性可以设置位置
//但是只能给元素设置不能给文档 所以$(body,html).animate({});
$(body,html).stop().animate({
    scrollTop:0
});
Loveyless
关注
专栏目录
Jquery遍历元素
qq_43781887的博客
07-12 5066
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
JQuery的引用
zwjl1017的博客
04-01 4084
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3476
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jquery移除标签
qq_35086941的博客
04-28 3744
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jquery在线引用
jiufu_的博客
07-15 5104
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5373
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5513
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 3283
jQuery的两种引入方式
jQuery在线引用地址
见证自己学习,成长的记录
08-20 3250
不需要把jar放到项目 1.官网jquery压缩版引用地址: 3.1.1版本: 　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 3.0.0版本: 　　<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 2.1.4版本: 　　<script src="http://code.
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 951
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 465
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 560
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 408
【代码】如何使用Redisson的布隆过滤器？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Loveyless

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值