jquery的优点:在查询方面非常的强大,是一个轻量级的框架,压缩版本在92kb左右
1.语法特点
- 内置隐式遍历,但是隐式遍历的过程我们是无法参与的所以不能增加其他的逻辑,只能拿来做统一的操作。
- 读写合一,就是字面意思,一个方法既能读取一个元素,也能设置一个元素
- 链式调用
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文本输出
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();