目录
2.jQuery对象:将dom元素对象以伪数组形式存储(可能只有一个元素)(用jQuery方式获取过来的对象是jQuery对象)
3.jQuery对象只能使用jQuery方法 ; DOM对象则只能使用原生的JavaScript的属性和方法
2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法
四种传参形式:①函数 ②DOM对象③#id .class③标签名
①有$.each(数组名 或 对象名,function(){})遍历数组或对象的数据注意此处是$直接调用的
如果遍历对象 就是 属性名称 属性值 如果遍历数组 就是索引 元素值
⑧$.parseJSON(json) : 解析json字符串转换为js对象/数组
七.方法属性方法 $.变量名.方法 $btns.each(function(){})方法 注意和上面的不同 这是$().each()
② .index() 返回索引 总元素个数是同级元素的所有兄弟个数
③.size()方法:引入老版本的jQuery的js文件有,新版本的没有 一般计算长度还是用length
attr('属性名','属性值') : 无法添加布尔值 单参数是读,双参数是写 读取属性添加属性
prop('要添加的属性名',true或者false) 添加布尔值
还可以用大于0 小于3来做 (就是要索引为1和2的li元素)
:lt 小于给定索引值 :gt 大于给定索引值 这两个选择器都不包含边界
⑦选择有title属性的li元素 $('li[title]').css('background','pink');
⑨选择所有有title属性 且title属性不为hello的li元素
4.表单选择器 $('外层标签名 内层标签名:属性值') 或者 $(':表单类型值:表单属性值') 可以直接用单层标签名:表单属性写
一:jQuery:一个优秀的JS函数库
下载 此链接
复制全部代码,然后打开编辑器创建一个js文件粘贴进去。
二:jQuery对象和DOM对象的区别与联系
html代码:
1.DOM对象:用原生js获取过来的对象是DOM对象
2.jQuery对象:将dom元素对象以伪数组形式存储(可能只有一个元素)(用jQuery方式获取过来的对象是jQuery对象)
这是一个DOM对象
3.jQuery对象只能使用jQuery方法 ; DOM对象则只能使用原生的JavaScript的属性和方法
三:DOM对象和jQuery对象相互转换
1.jQuery对象转DOM对象:其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
2.DOM对象转jQuery对象
四:JQ的$符号是什么
1.$是JQ的别称 $=jQuery
是相同的
2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法
五.JQ作为函数调用
四种传参形式:①函数 ②DOM对象(this默认指向DOM对象)③#id .class③标签名
六.JQ作为对象使用的工具方法 $.方法名:
①有$.each(数组名 或 对象名,function(){})遍历数组或对象的数据注意此处是$直接调用的
-
如果遍历对象 就是 属性名称 属性值 如果遍历数组 就是索引 元素值
②$.trim(字符串名) 去除字符串两边的空格
③$.type(名字) 得到数据的类型
⑥$.isArray(obj): 判断是否是数组
⑦$.isFunction(obj): 判断是否是函数
⑧$.parseJSON(json) : 解析json字符串转换为js对象/数组
七.方法属性方法 $.变量名.方法 $btns.each(function(){})方法 注意和上面的不同 这是$().each()
<p>哈哈哈我是按钮3的兄弟元素</p>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
$(function () {
// 通常我们通过jquery获取的元素集合 我们称为jquery对象 在变量命名的时候,都会在最前面添加一个$
// 如下$btns 写和不写都可以,但是为了区分DOM对象和jQuery对象我们要写
var $btns = $('button');
})
</script>
① $btns.each(function(){}) 遍历
② .index() 返回索引 总元素个数是同级元素的所有兄弟个数
③.size()方法:引入老版本的jQuery的js文件有,新版本的没有 一般计算长度还是用length
④.eq(索引值) 以JQ的方式获取第二个按钮
⑤操作任意属性 attr removeAttr prop
-
attr('属性名','属性值') : 无法添加布尔值 单参数是读,双参数是写 读取属性添加属性
-
removeAttr('属性名') 移除某个属性
-
prop('要添加的属性名',true或者false) 添加布尔值
⑥操作class属性
-
addClass('class值')
-
removeClass()
⑦操作HTML代码/文本/值
-
.html() 读方法:返回标签内文本
-
.html('要添加的文本') 写方法
-
.val()读方法:返回value值
-
.val('要修改成什么写什么')写方法:修改value值
八:选择器
1.基本选择器
2.层级选择器
①选中ul下所有的的span
$('ul span').css('background', 'pink');
②选中ul下所有的子元素span
$('ul>span').css('background', 'pink')
③选中class为box的下一个li
$('.box + li').css('background', 'pink') //BBBBB那个
④选中ul下的class为box的元素后面的所有兄弟元素
$('.box ~ li').css('background', 'pink'); //BBBBB DDDD EEEEE 这三个兄弟
3.过滤选择器
①选择第一个div
$('div:first').css('background','pink')
②选择最后一个class为box的元素
$('.box:last').css('background','pink');
③选择所有class属性不为box的div
$('div:not(.box)').css('background','pink');
④选择第二个和第三个li元素
eq 是按照索引来查找元素的 从零开始
$('li:eq(1)').css('background','pink');
$('li:eq(2)').css('background','pink');
$('li:eq(1),li:eq(2)').css('background','pink')
还可以用大于0 小于3来做 (就是要索引为1和2的li元素)
:lt 小于给定索引值 :gt 大于给定索引值 这两个选择器都不包含边界
$('li:gt(0):lt(3)').css('background','pink'); 但是这样写会出现问题,会把索引为1,2,3的元素一起选出来,原因如下图:gt先开始执行的话,执行完毕后li会重新赋值,索引为1的变成了0;2变1;3变2... 再执行lt小于3 ,此时取到的多一个
解决办法:从0取到2 或者 先从后截取再从前截取
$('li:gt(0):lt(2)').css('background','pink');
$('li:lt(3):gt(0)').css('background','pink');
⑤ 选择内容带BBBBB的li
$('li:contains(BBBBB)').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][title!=hello]').css('background', 'pink');
4.表单选择器 $('外层标签名 内层标签名:属性值') 或者 $(':表单类型值:表单属性值') 可以直接用单层标签名:表单属性写