本文共 5623 字，大约阅读时间需要 18 分钟。

一、认识jQuery

1、JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API，在开发时，以最少代码实现最多的功能。于2006年开源，现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。宗旨：write less,do more!（写的少，做得多）

2.学习文档

中文文档：https://www.jquery123.com/ API学习或查询：https://jquery.cuishifeng.cn/

3.JQ功能

（1）控制页面样式 （2）访问和操作DOM （3）事件处理 （4）提供了大量的插件 （5）Ajax技术的封装 （6）提供了大量的动画处理

二、使用JQuery

测试代码

（1）本地引入

（2）CDN引入

注意：JQ必须先引入，然后才能调它的API。可以在head标签中引入，也可以在最后引入，一般在最后引入。

$('.box')    .html('欢迎来到JQ世界！')    .css('color','red')    .mouseover(function(){      $(this).fadeOut(2000)/*隐藏*/  });

三、选择器

（一）基本选择器

测试代码

   
    id
   
   
    class1
   
   
    class2
   
   
    class3
   
ppppppppppppp1
ppppppppppppp2
ppppppppppppp3

1、id: #id

$('#box').css({  color: 'blue',  background: '#eee'})

2、class: .class

$('.box').css({  color: 'red',  background: '#eee',  marginBottom: '10px'})

3、element: element

$('p').css({  color: 'red',  background: '#eee',  marginBottom: '10px'})

4、* 选择所有标签（项目开发时，不要用，因为它要匹配完所有的标签，性能差）

console.log($('*'))

5、, 选择多个DOM

$('#box,.box,p').click(function () {        console.log($(this).html())})

点击标签时在控制台可以看见

（二）层次选择器

测试代码

   
  
    span1  
    
    
     span2  
    
   
pppppppppp
pppppppppp
pppppppppp
   
    test
   

1、选择器1 选择器2：选择选择器1的所有的后代元素（选择器2）

$('.wrapper span').html('这是span新的内容');

2、选择器1>选择器2：只选择选择器1的子元素

$('.wrapper>span').html('这是span新的内容');

3、选择器1+选择器2：选择紧挨着选择器1的第一个相邻元素（兄弟元素）

$('.wrapper+p').css('color','red')

4、选择器1~选择器2：选择选择器1的所有兄弟元素

$('.wrapper~.test').css('color','red');$('.wrapper~p').css('color','red');

（三）过滤选择器

测试代码

   
  
    
li01
  
    
li02
  
    
li03
  
    
li04
  
    
li05
   
h1
h3
h6

1、简单过滤选择器

（1）:first或first() 第一个元素

$('ul li:first').css('color','red');

（2）:last或last() 最后一个元素

$('ul li:last').css('color','blue');

（3）:not(selector) 除selector之外的元素

$('ul li:not(.li3)').css('color','blue')

（4）:even 偶数元素

$('ul>li:even').css('color','blue');

（5）:odd 奇数元素

$('ul>li:odd').css('color','blue')

（6）:eq(index) 第n个元素

$('ul>li:eq(2)').css('color','blue')

（7）:gt(index) 大于第n个后的元素

$('ul>li:gt(2)').css('color','blue');

（8）:lt(index) 小于第n个后的元素

$('ul>li:lt(2)').css('color','blue')

（9）:header 选择h1-h6所有标题元素

$(':header').css('color','blue')

2、内容过滤选择器

测试代码

aaadfdfd
dfdsfd
dfdsffd

（1）:contains(text) 获取包含指定文本内容的元素

$('p:contains(aaa)').css('color','red')

（2）:empty 获取不包含子元素或文本内容的元素

$('p:empty').html('新的内容')

（3）:has(selector) 获取含有选择器所匹配的元素

$('p:has(span)').html('aaaaaaaaaaaaaaaaaa')

（4）:parent 获取含有子元素或文本的元素

$('p:parent').html('新的内容')

3、可见性过滤选择器

测试代码

   
    box1
   
   
    box2
   
ppppppppppppp

（1）:hidden 选择display:none或隐藏文本域(hidden)的元素

$('div:hidden').css('display','block')

此时box1会被隐藏起来

（2）:visible 选择display:block的元素

$('div:visible').css('color','red')

4、属性过滤选择器

测试代码

ppppppppppppppp
ppppppppppppppp
ppppppppppppppp
aaaaaaaaaaaaaa
bbbbbbbbbbbbbb

（1）[attr] 获取含有指定属性的元素

$('p[title]').css('color','red');

（2）[attr=value] 获取属性值为value的元素

$('p[title=bpp]').css('color','red')

（3）[attr!=value] 获取属性值不为value的元素

$('p[title!=p]').css('color','red')

（4）[attr^=value] 获取属性值以value开头的元素

$('p[title^=p]').css('color','red')

（5）[attr$=value] 获取属性值以value结尾的元素

$('p[title$=p]').css('color','red')

（6）[attr*=value] 获取属性值含有value的元素

$('p[title*=b]').css('color','red')

（7）[attr1][attr2][attr3] 获取含有指定多个属性的元素

$('p[title][id]').css('color','red')

（四）表单选择器

测试代码

   
  
     
    
  
     
    
  
     
    
  
     
    
  
     
    
  
    bbbbbbbbbbb
   

1、:input

$(':input').val('aaaaaaaaaa')

2、:button

$(':button').val('aaaaaaaaaa')

3、:submit

$(':submit').val('aaaaaaaaaa')

4、:text

$(':text').val('aaaaaaaaaa')

5、:password

$(':password').val('aaaaaaaaaa')

四、DOM操作

（一）属性操作

测试代码

1、获取属性值：attr(属性名)

console.log($('img').eq(0).attr('src'))

2、设置属性：attr(属性名,属性值)

$('img').eq(0).attr('src','https://dss1.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/weather/icons/a1.png')

3、删除属性：removeAttr(属性名)

$('img').removeAttr('alt')

（二）文本内容操作

1、获取文本及表单组件内容

（1）html() 可以操作标签

console.log($('p').html());

（2）text() 只能操作文本内容，不操作标签

console.log($('p').text());

（3）val() 只能用于表单组件

console.log($(':text').val());

2、设置（修改）文本及表单组件内容

（1）html(内容)

$('p').html('strong');

（2）text(内容)

$('p').text('strong');

（3）val(内容)

$(':text').eq(1).val('abcdefg');

3、删除文本及表单组件内容

（1）html(’’)

$('p').html('')

（2）text(’’)

$('p').text('');

（3）val(’’)

$(':text').eq(1).val('')

（三）元素样式操作

ppppppppppp

1、设置样式

（1）css(‘属性名’,‘属性值’) 设置一个样式

$('p').css('color','red')

（2）css({‘属性名1’:‘属性值1’,‘属性名2’:‘属性值2’,…}) 设置多个样式

$('p').css({  'color':'red',  'background-color':'gray'});

2、操作类

（1）添加类

addClass(‘类名’) 添加一个类名

$('p').addClass('red')

或：

addClass(‘类名1 类名2 …’) 添加多个类名

$('p').addClass('red bgc');

（2）删除类

removeClass() 清空类名

$('p').removeClass()

或：

removeClass(‘类名’) 清除指定的类名

$('p').removeClass('red')

或：

removeClass(‘类名1 类名2 …’) 清除指定的多个类名

$('p').removeClass('red bgc')

（四）页面元素操作

测试代码

   
  
    
    
     
aaaa
    
     
aaaa
    
     
aaaa
  
    
   
   
    box2
   
ppppppppppppppp

1、创建DOM节点

（1）$(dom节点内容)

var dom = $('
这是添加的内容
');

2、在内部添加DOM节点

（1）append() 在内部的最后添加DOM

$('.box').append(dom)

（2）appendTo() 将DOM添加到内部的最后

$(dom).appendTo($('.box'))

（3）prepend() 在内部的最前面添加DOM

$('.box').prepend(dom)

（4）prependTo() 将DOM添加到内部的最前面

$(dom).prependTo($('.box'))

3、在外部添加DOM节点

（1）before() 在当前DOM前添加（同级添加）

$('.box').before($('strong'))

（2）insertBefore() 把DOM添加到当前元素之前（同级添加）

$('strong').insertBefore($('.box'))

（3）after() 在当前DOM之后添加（同级添加）

$('.box').after($('strong'))

（4）insertAfter() 把DOM添加到当前元素之后（同级添加）

$('strong').insertAfter($('.box'))

4、复制DOM节点

（1）clone() 只复制DOM元素

$('.box').append($('.p').clone())

（2）clone(true) 复制DOM及绑定在它上面的事件

$('.p').click(function () {    alert(111111111111)  });$('.box').append($('.p').clone(true))

5、删除DOM节点

（1）remove() 删除当前DOM及子元素

$('.box').remove('[title]')

（2）remove(dom节点) 在同级DOM中删除指定的DOM

// $('.box').remove('ul')

（3）empty() 删除当前DOM下的子元素，保留当前DOM

$('.box').empty()

转载地址：http://dfvrn.baihongyu.com/