JQuery简介及函数、选择器使用说明和案例

jquery的优点：在查询方面非常的强大，是一个轻量级的框架，压缩版本在92kb左右

1.语法特点

1. 内置隐式遍历，但是隐式遍历的过程我们是无法参与的所以不能增加其他的逻辑，只能拿来做统一的操作。
2. 读写合一，就是字面意思，一个方法既能读取一个元素，也能设置一个元素
3. 链式调用

2.jquery核心函数

jQuery 或者 $ 都是可以访问jquery核心函数的关键字，想要使用jquery写代码 第一步 一定要先引入jquery文件

文件在官网下载：https://jquery.com/
或者引入线上链接 https://code.jquery.com/jquery-1.12.4.min.js

2.1 参数类型

1. 参数类型为函数 ：约等于window.onload

 $(function () {    }

2. 参数为选择器字符串: 将匹配的dom对象封装进jquery对象当中,然后返回

$('.btn').click(function () {    }

3. 参数类型为dom对象：将当前的dom对象转换成jquery对象

   alert($(this).html());
   $(this)——jquery对象 html()——jquery文本输出
   this——dom对象 innerHTML——dom文本输出

3.jquery核心对象

执行jquery核心函数返回的那个实例化对象就是我们所谓的jquery核心对象，jquery对象内部包含匹配的任意个数的dom对象的伪数组对象集合。可以通过给jquery核心函数传递选择器字符串的参数获得jquery对象

3.1需求写法

需求1：统计一共多少个按钮

 console.log($('button').length);
console.log($('button').size());

需求2：取出第二个button的文本

dom => query，将dom对象 作为参数传递给jquery核心函数
jquery => dom，索引访问某一个或者遍历访问每一个

console.log($('button')[1].innerHTML);

需求3：输出所有button标签的文本

隐式遍历：读只读第一个，写是写所有，也就是说使用隐式遍历如果对一个集合进行读取的操作，只会返回该集合当中第一个元素的对应内容
如果对一个集合进行设置才做，则会操作整个集合，但是遍历的过程当中我们不能增加其他逻辑，所以都是进行统一操作

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

需求4： 输出测试三是所有按钮当中的第几个
index 返回的就是 调用元素 在同级兄弟元素当中的索引

console.log($('.btn3').index());

3.2each

jquery对象的遍历方法，语法和forEach非常的像，参数都是一个回调函数
回调函数的形参是反的，第一个形参时索引，第二个形参是当前枚举元素，没有第三个形参
回调函数当中的this，直接就指向当前枚举的那个元素，所以如果不需要访问索引的话，直接使用this即可

例：

  
Item 1
  
Item 2
  
Item 3

$("#myList li")选择了所有
元素，并使用.each()方法遍历每个元素。
在回调函数中，$(this)指向当前枚举的元素，使用.text()方法获取元素的文本内容并输出到控制台。

需要注意的是，jQuery的.each()方法与JavaScript的forEach方法有些许不同，
主要是参数的顺序和回调函数中的this指向。

3.3$().each();

通用遍历方法，就是用来遍历常规的数组或对象的
参数1：遍历目标 参数2：回调函数 回调函数的 形参1：索引(属性名) 形参2：当前枚举元素（属性值）

例：

var arr = [1, 2, 3, 4, 5];

$.each(arr, function(index, element) {
  console.log("索引：" + index + "，值：" + element);
});

arr是要遍历的数组，使用.each()方法遍历每个元素。
在回调函数中，index表示当前元素的索引，element表示当前枚举的元素。
通过console.log()将索引和值输出到控制台。
需要注意的是，.each()方法是jQuery提供的，与JavaScript的forEach方法有些许不同，
主要是参数顺序和回调函数中的参数名称。

4.基本选择器

它是有特定格式的字符串，用来查找特定页面元素

4.1

1. #id : id选择器
2. List item
3. element : 元素选择器
4. .class : 属性选择器
5. ‘*’ : 任意标签
6. selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
7. selector1selector2selectorN : 取多个选择器的交集(相交选择器)

例：

1. 选择id为div1的元素

$('#div1').css('background','pink')

2. 选择所有的div元素

 $('div').css('background','pink')

3. 选择所有class属性为box的元素

$('.box').css('background','pink');

4. 选择所有的div和span元素

$('div,span').css('background','pink')

5. 选择所有class属性为box的div元素

$('div.box').css('background','pink')

5.层次选择器

查找子元素、后代元素、兄弟元素的选择器

5.1

1. ancestor descendant 在给定的祖先元素下匹配所有的后代元素
2. parent>child 在给定的父元素下匹配所有的子元素
3. prev+next 匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings 匹配 prev 元素之后的所有 siblings 元素

例：

1. 选中ul下所有的的span

$('ul span').css('background','pink')

2. 选中ul下所有的子元素span

 $('ul > span').css('background','pink')

3. 选中class为box的下一个li

 $('.box + li').css('background','pink')

4. 选中ul下的class为box的元素后面的所有兄弟元素

$('.box~').css('background','pink')

6.过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器

例：

1. 选择第一个div

 $('div:first').css('background','pink')

2. 选择最后一个class为box的元素

 $('div:first').css('background','pink')

3. 选择所有class属性不为box的div

$('div:not(.box)').css('background','pink')

4. 选择第二个和第三个li元素

   第一种：

   $('li:eq(1)').css('background','pink')
   $('li:eq(2)').css('background','pink')
   

   第二种：

    $('li:eq(1),li:eq(2)').css('background','pink')
   

   :gt() 大于给定索引值的元素 :lt() 小于给定索引值的元素

   第三种：

   $('li:gt(0):lt(3)').css('background','pink');  
   

   此种方法选择出来多一个元素

   第四种：

   $('li:lt(3):gt(0)').css('background','pink');
   

   注意：jquery当中的选择器 都是从左向右依次执行 使用上一个选择器的执行结果 去执行下一个选择器

5. 选择内容为BBBBB的li

 $('li:contains(B)').css('background','pink')

6. 选择隐藏的li

 $('li:hidden').show(1000);

7. 选择有title属性的li元素

$('li[title]').css('background','pink')

8. 选择所有属性title为hello的li元素

$('li[title=hello]').css('background','pink')

9. 选择所有有title属性 且title属性不为hello的li元素

 $('li[title]:not([title=hello])').css('background','pink')

7.表单选择器

7.1 input 标签选择器

7.2 :input 表单元素选择器，用于选择所有表单元素，input、button、select、textarea

例：

1. 选择不可用的文本输入框

$('input:text:disabled').css('background','pink')

2. 显示选择爱好的个数

$('input:checkbox:checked').length

3. 显示选择的城市名称

$('select option:selected').html()

8.属性

8.1 操作任意属性

1.attr() 用于设置非布尔值属性
 读取属性 attr('title')
 设置属性  attr('name','atguigu')

2. removeAttr()  移除属性

3.prop()   prop 用于设置布尔值属性

8.2 操作class属性

addClass()  新增指定class属性
removeClass() 移除指定class属性

8.3 操作HTML代码/文本/值

html() 读取文本内容
html('
mmmmmmmmm
')设置文本内容
 
val()读取输入框内容
val('atguigu')设置输入框内容

例：

1. 读取第一个div的title属性

 $('div:first').attr('title')

2. 给所有的div设置name属性(value为atguigu)

$('div').attr('name','atguigu');

3. 移除所有div的title属性

$('div').removeAttr('title')

4. 给所有的div设置class=‘guiguClass’

$('div').attr('class','guiguClass')

5. 给所有的div添加class=‘abc’ （新增加一个class属性）

$('div').addClass('abc asd')

6. 移除所有div的guiguClass的class

$('div').removeClass('guiguClass')

7. 得到最后一个li的标签体文本

$('li:last').html()

8. 设置第一个li的标签体为mmmmmmmmm

$('li:first').html('
mmmmmmmmm
')

9. 得到输入框中的value值

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

10. 将输入框的值设置为atguigu

$('input:text').val('atguigu')

11. 点击’全选’按钮实现全选

$('button:first').click(function () {
      //  attr 用于设置非布尔值属性
      //  prop 用于设置布尔值属性
      $('input:checkbox').prop('checked',true);
  })

12. 点击’全不选’按钮实现全不选

$('button:last').click(function () {
      $('input:checkbox').prop('checked',false)
  })

9.css

设置css样式/读取css值
css方法 既可以获取行内样式 也可以获取非行内样式，设置的时候 还是设置元素的行内样式

例：

1. 得到第（最后）一个p标签的颜色

console.log($('p:first').css('color'));
	console.log($('p:last').css('color'));

2. 设置所有p标签的文本颜色为red

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

3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)

$('p').css('color','#ff0011');
$('p').css('background','blue');
$('p').css('width','300px');
$('p').css('height','30px');

 $('p').css('color','#ff0011').css('background','blue').css('width','400px').css('height','30px');

配置对象

$('p').css({
  color:'#ff0011',
  background:'blue',
  width:'300px',
  height:'30px'
})

10.筛选-过滤

在jQuery对象中的元素对象数组中过滤出一部分元素来

过滤选择器是在元素查询的阶段作为参数传递给jquery核心函数，用去设置筛选条件的，这个时候还没有jquery对象，而是要通过过滤选择器，将匹配的元素放入到jquery对象当中。

筛选过滤的方法是使用jquery对象进行调用，在已经存在jquery的对象的情况下，已经过了元素查询的阶段。如果我们在这个时候需要对现有的集合进行过滤，就只能使用该方法了，而不能使用选择器

基本过滤操作：
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)

例：

1. ul下li标签第一个

$list.first().css('background','pink')

2. ul下li标签的最后一个

$list.last().css('background','pink');

3. ul下li标签的第二个

$list.eq(1).css('background','pink')

4. ul下li标签中title属性为hello的

$list.filter('[title=hello]').css('background','pink');

5. ul下li标签中title属性不为hello的

$list.filter('[title!=hello]').css('background','pink');

6. ul下li标签中有span子标签的

$list.has('span').css('background','pink');

11.筛选查找孩子、父母、兄弟标签

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签

基本筛选-查找操作:
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签

例：

1. ul标签的第2个span子标签

$ul.children('span:eq(1)').css('background','pink')

2. ul标签的第2个span后代标签

$ul.find('span:eq(1)').css('background','pink')

3. ul标签的父标签

$ul.parent().css(‘background’,‘pink’);

4. id为cc的li标签的前面的所有li标签

$('#cc').prevAll()

注：所有带All的  可以通过传递选择器  进行再一次的过滤与筛选
prevAll的查询结果为倒序    但是统一操作的话 我们不用理会这个问题
只有当我们需要使用索引操作prevAll的带的结果时 才需要注意

5. id为cc的li标签的所有兄弟li标签

$('#cc').siblings('li').css('background','pink')

12.文档增删改

12.1添加/替换元素

1. append(content)

   向当前匹配的所有元素内部的最后插入指定内容

2. prepend(content)

   向当前匹配的所有元素内部的最前面插入指定内容

3. before(content)

   将指定内容插入到当前所有匹配元素的前面

4. after(content)

   将指定内容插入到当前所有匹配元素的后面替换节点

5. replaceWith(content)

   用指定内容替换所有匹配的标签删除节点

12.2删除元素

6. empty()

   删除所有匹配元素的子元素

7. remove()

   删除所有匹配的元素

例：

1. 向id为ul1的ul下添加一个span(最后)

$('我是新增的span').appendTo('#ul1');
$('#ul1').append('我是新增的span');

2. 向id为ul1的ul下添加一个span(最前)

$('我是新增的span').prependTo('#ul1');
	$('#ul1').prepend('我是新增的span')

3. 在id为ul1的ul下的li(title为hello)的前面添加span

$('#ul1 li[title=hello]').before('我是before新增的span')

4. 在id为ul1的ul下的li(title为hello)的后面添加span

$('#ul1 li[title=hello]').after('我是after新增的span')

5. 将在id为ul2的ul下的li(title为hello)全部替换为p

$('#ul2 li[title=hello]').replaceWith('
我是替换的p标签
')

6. 移除id为ul2的ul下的所有li
   remove直接删除调用元素 empty 清空当前元素 其实也就是删除其内部所有子元素

$('#ul2').children('li').remove();
$('#ul2').remove();

13.爱好选择器