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

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

1.语法特点

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

jquery_11">2.jquery核心函数

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

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

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

2.1 参数类型

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

 $(function () {    }

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

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

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

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

jquery_43">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即可

例：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  $("#myList li").each(function(index, element) {
    console.log($(this).text());
  });
</script>

$("#myList li")选择了所有<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

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

例：

选择id为div1的元素

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

选择所有的div元素

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

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

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

选择所有的div和span元素

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

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

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

5.层次选择器

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

5.1

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

例：

选中ul下所有的的span

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

选中ul下所有的子元素span

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

选中class为box的下一个li

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

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

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

6.过滤选择器

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

例：

选择第一个div

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

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

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

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

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

选择第二个和第三个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当中的选择器都是从左向右依次执行使用上一个选择器的执行结果去执行下一个选择器
选择内容为BBBBB的li

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

选择隐藏的li

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

选择有title属性的li元素

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

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

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

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

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

7.表单选择器

7.1 input 标签选择器

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

例：

选择不可用的文本输入框

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

显示选择爱好的个数

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

显示选择的城市名称

$('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('<h1>mmmmmmmmm</h1>')设置文本内容
 
val()读取输入框内容
val('atguigu')设置输入框内容

例：

读取第一个div的title属性

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

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

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

移除所有div的title属性

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

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

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

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

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

移除所有div的guiguClass的class

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

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

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

设置第一个li的标签体为<h 1 >mmmmmmmmm</h 1>

$('li:first').html('<h1>mmmmmmmmm</h1>')

得到输入框中的value值

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

将输入框的值设置为atguigu

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

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

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

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

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

9.css

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

例：

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

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

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

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

设置第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)

例：

ul下li标签第一个

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

ul下li标签的最后一个

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

ul下li标签的第二个

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

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

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

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

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

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

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

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

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

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

例：

ul标签的第2个span子标签

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

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

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

ul标签的父标签

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

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

$('#cc').prevAll()

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

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

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

12.文档增删改

12.1添加/替换元素

append(content)

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

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

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

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

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

12.2删除元素

empty()

删除所有匹配元素的子元素
remove()

删除所有匹配的元素

例：

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

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

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

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

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

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

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

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

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

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

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

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