jquery基础知识汇总笔记

版权声明：撰写不易，转载请注明原文出处，如有错误，欢迎批评指正。如有版权问题，请联系[email protected] https://blog.csdn.net/qq_42195688/article/details/80578376

jQuery 基础知识汇总

使用方法：1. <script src="js/jquery.min.js"></script>

2. $(function(){

alert('hello world!');

});

1. 选择器

1. 基本选择器

$('#box').css('background', '#bbffaa'); //Id

$('.box').css('background','#bbffaa'); //ClassName

$('div').css('background','#bbffaa'); //TagName

$('*').css('background', '#bbffaa'); //全选

$('#box1,.box2,p').css('background', '#bbffaa'); //组合

1. 层次选择器

$('#box span').css('background', '#bbffaa'); //后代

$('#box>span').css('background', '#bbffaa'); //儿子

$('#test1+span').css('background', '#bbffaa'); //后一个兄弟

等价于 $('#test1').next('span').css('background', '#bbffaa');

$('#test1~span').css('background', '#bbffaa'); //后所有兄弟

等价于 $('#test1').nextAll('span').css('background', '#bbffaa');

$('#test1').siblings('span').css('background', '#bbffaa'); //同辈（所有兄弟，包括前后）

1. 过滤选择器

（1）基本过滤选择器

$('li:first').css('color','#bbf'); //第一个li

$('li:last').css('color','#bbf'); //最后一个li

$('li:not(.three)').css('color','#bbf'); //除了class为three的其他所有li

$('li:even').css('color','#bbf'); //索引为偶数的所有li

$('li:odd').css('color','#bbf'); //索引为奇数的所有li

$('li:eq(2)').css('color','#bbf'); //索引值等于2的li

$('li:gt(2)').css('color','#bbf'); //索引值大于2的li

$('li:lt(2)').css('color','#bbf'); //索引值小于2的li

$(':header').css('color','#bbf'); //所有的标题元素（h1 h2 …h6）

$(':animated').css('background','#bbf'); //正在执行动画的元素

$(':focus').css('background','#bbf'); //改变当前获取焦点元素的背景色

1. 内容过滤选择器

$('span:contains(哈哈)').css('background','#bbf'); //含有指定文本内容的元素

$("span:empty").css('background','#bbf'); //没有子元素的该元素（包括文本和空格也不能有）

$("span:parent").css('background','#bbf'); //有子元素的该元素（有文本和空格的也算）

$('h1:has(span)').css('color','#bbf'); //含有某个元素的元素

1. 可见性过滤选择器

$("div:visible").css('background','#bbf'); //更改所有可见div的背景色

$("div:hidden").show(3000); //显示所有隐藏的div(既包括display:none,也包括隐藏域，还有visibility:hidden之类的元素)

1. 属性过滤选择器

$("span[title]").css('background', '#bbf'); //含有title属性的元素

$("span[title=test]").css('background', '#bbf'); //改变title属性值为test的元素的属性

$("span[title!=test]").css('background', '#bbf'); //title属性值不为test的元素的属性

$("span[title^=te]").css('background', '#bbf'); //title属性值以te开头的元素

$("span[title$=est]").css('background', '#bbf'); //title属性值以est结尾的元素

$("span[title*=es]").css('background', '#bbf'); //title属性值含有es的元素

$("span[id][title*=es]").css('background', '#bbf'); //含有id,并且title值含有es的span元素

$("span[title|=en]").css('background', '#bbf'); //title属性值等于en或以en为前缀的元素

$("span[title~=uk]").css('background', '#bbf'); //title属性用空格分隔的值中包含字符uk的元素

1. 子元素过滤选择器

$("div :nth-child(2)").css('background', '#bbf'); //div的第二个子元素

$("div :first-child").css('background', '#bbf'); //div的第一个子元素

$("div :last-child").css('background', '#bbf'); //div的最后一个子元素

$("div :only-child").css('background', '#bbf'); //有且仅有一个子元素的div的子元素

1. 表单对象属性过滤选择器

$('#form1 input:enabled').val('这里变化了'); //改变表单内可用input的值

$('#form1 input:disabled').val('这里变化了'); //改变表单内不可用input的值

$('#form1 input:checked').length; //获取单选多选框被选中的个数

$('select :selected').text(); //获取下拉框选中的内容

1. 表单选择器

$(':input'); //选取所有的input textarea select和button元素

$(':text'); //选取单行文本框

$(':password'); //选取密码框

$(':radio'); //选取单选框

$(':checkbox'); //选取复选框

$(':submit'); //选取提交按钮

$(':image'); //选取图像按钮

$(':reset'); //选取重置按钮

$(':button'); //选取所有的按钮

$(':file'); //选取上传域

$(':hidden'); //选取所有不可见元素

1. DOM操作

DOM Core

document.getElementById()

document.getElementsByITagName()

document.getElementsByClassName()

document.getElementsByName()

getAttribute()

setAttribute()等

HTML-DOM

document.forms

element.src等等

jQuery中的DOM操作

查找节点

1.查找元素节点

var $li = $('ul li:eq(1)');

var li_txt = $li.text();

alert(li_txt);

2.查找属性节点

var $para = $('p');

var p_txt = $para.attr('title');

alert(p_txt);

创建节点

1. 创建元素节点

var $li_1 = $('<li>li_1</li>');

var $li_2 = $('<li>li_2</li>');

$('ul').append($li_1);

$('ul').append($li_2);

1. 创建文本节点

var $li_1 = $('<li>香蕉</li>');

var $li_2 = $('<li>雪梨</li>');

$('ul').append($li_1);

$('ul').append($li_2);

1. 创建属性节点

var $li_1 = $("<li title='香蕉'>香蕉</li>");

var $li_2 = $("<li title='雪梨'>雪梨</li>");

$('ul').append($li_1);

$('ul').append($li_2);

插入节点

$('p').append('<b>你好</b>'); //在p内部追加b

$('<b>你好</b>').appendTo('p'); //将b追加到p的内部，可以用来移动元素

$('p').prepend('<b>你好</b>'); //在p的内部前置b

$('<b>你好</b>').prependTo('p'); //将b前置到p的内部，可以用来移动元素

$('p').after("<b>你好</b>"); //在p的后面插入b

$('<b>你好</b>').insertAfter('p'); //将b插入到p的后面，可以用来移动元素

$('p').before('<b>你好</b>'); //在p的前面插入b

$('<b>你好</b>').insertBefore('p'); //将b插入到p的前面，可以用来移动元素

删除节点

1. remove()方法

$('ul li:eq(1)').remove(); //删除第二个li节点，返回这个节点的引用

$('ul li').remove('li[title!=菠萝]'); //删除title不等于菠萝的li元素

1. detach()方法

$('ul li').click(function(){

alert($(this).html());

});

var $li = $('ul li:eq(1)').death();

$li.append('ul');

//从DOM中删除元素，但是保留他绑定的事件、附加的数据等等，重新追加这个元素，之前绑定的事件还在

1. empty()方法

$('ul li:eq(1)').empty(); //清空元素内部的内容，注意是元素里

复制节点

$('ul li').click(function(){

$(this).clone().appendTo('ul'); //单击后复制该节点，并将它追加到ul元素中

});

复制节点后，被复制的新元素不具有任何行为，如果需要新元素也具有复制功能，则需要在clone()中传递参数true，如：

$(this).clone(true).appendTo('ul');

替换节点

$('p').replaceWith('<strong>你最不喜欢的水果是？</strong>'); //把p替换为后面的内容

$('<strong>你最不喜欢的水果是？</strong>').replaceAll('p'); //用前面的内容替换掉p

替换后之前元素绑定的事件都将消失，如果需要得重新绑定

包裹节点

1. wrap()

$('strong').wrap('<b></b>'); //分别把每一个strong用b包括起来

1. wrapAll()

$('strong').wrapAll('<b></b>'); //用一个b把所有string包裹起来

1. wrapInner()

$('strong').wrapInner('<b></b>'); //将每一个strong的子内容用b包裹起来

属性操作

1. 获取属性和设置属性

var $para = $('p');

var p_txt = $para.attr('title'); //获取元素的值

$('p').attr('title','your title'); //设置某个属性

$('p').attr({'title':'your title','name':'test'}); //同时设置多个属性

类似用法的函数还有：html() text() height() width() val() css() 等方法

1. 删除属性

$('p').removeAttr('title'); //删除某个属性

jQuery1.6中新增了prop()和removeprop()，分别用来获取在匹配元素集中的第一个元素的属性值和为匹配元素删除设置的属性

样式操作

1. 获取样式和设置样式

var p_class = $('p').attr('class'); //获取p的class

$('p').attr('class','high'); //设置p的class为high

1. 追加样式

$('p').addClass('class','another'); //给p追加class为another

3、移除样式

$('p').removeClass('high'); //移除p的high样式

$('p').removeClass('class1 class2'); //移除多个样式

$('p').removeClass(); //清空样式

4、切换样式

类似toggle()方法用以循环交替执行代码块，toggleClass()用以切换样式

$('p').toggleClass('another'); //在原始类 和 （原始类+another）之间切换

5、判断是否含有某个样式

$('p').hasClass('another'); //判断是否含有another样式，返回布尔值

等价于 $('p').is('.another');

设置和获取HTML、文本和值

1. html()方法

var $p_html = $('p').html(); //获取p中的html

$('p').html('<strong>老司机，嘀嘀嘀</strong>'); //设置html

1. text()方法

var $p_html = $('p').text(); //获取p中的文本

$('p').text('老司机，嘀嘀嘀'); //设置文本内容

1. val()方法

类似javascript中的value，也可以获取值和设置值;

defaultValue属性包含表单元素的初始值，使用方法this.defaultValue;

遍历节点

1. children()方法

var $lis = $('ul').children(); //子元素个数

1. next()方法

var $p1 = $('p').next(); //取得紧邻p元素之后的同辈元素

1. prev()方法

var $ul = $('ul').prev(); //取得紧邻ul元素前的同辈元素

1. siblings()方法

var $ps = $('p').siblings(); //取得p的所有同辈元素

1. closest()

$('#box').closest('li'); //距离id为box元素最近的一个li

1. parent()，parents()，closest()区别

$('.test').parent(); //获得集合中每个匹配元素的父元素

$('.test').parents('p'); //获得集合中每个匹配元素的祖先元素

$('.test').closest('p'); //返回最先匹配的祖先元素

CSS-DOM操作

$('p').css('color'); //获取css属性值

$('p').css('color','red'); //设置单个css属性值

$('p').css({'fontSize':'30px','backgroundColor':'#888888'}); //设置多个css属性值

$('p').css('height'); //获取高度

$('p').height(); //获取高度

$('p').height(100); //设置高度

$('p').height('10em'); //设置高度

$('p').width(); //获取宽度

$('p').width(100); //设置宽度

$('p').width('10em'); //设置宽度

1. offset()方法

var offset = $('p').offset();

var left = offset.left;

var top = offset.top;

1. position()方法

var position = $('p').position();

var left = position.left;

var top = position.top;

1. scrollTop()方法和scrollLeft()方法

var scrollTop = $('p').scrollTop();

var scrollLeft = $('p').scrollLeft();

$('textarea').scrollTop(300);

$('textarea').scrollLeft(300);

1. 事件和动画

原文链接：https://blog.csdn.net/qq_42195688/article/details/80578376