简介
JQuery是对JavaScript封装的一个框架包,简化对JavaScript的操作
JavaScript代码:获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jquery代码:无需考虑浏览器兼容问题、代码足够少
JQuery:JavaScript+Query
jquery-2.1.4.js
链接:https://pan.baidu.com/s/1JZX4dIJO4AqAkm554BZXhQ?pwd=kysh
提取码:kysh
选择器
1. 基本选择器
$('#id属性值') —— document.getElementById()
$('tag标签名') —— document.getElementsByTagName();
$('.class属性值') —— class属性值选择器
$('*') —— 通配符选择器
$('s1,s2,s3') —— 联合选择器
2. 层次选择器
$(s1 s2)
后代选择器:在s1内部获得全部的s2节点(不考虑层次)
$(s1>s2)
直接子元素选择器:在s1内部获得s2的子元素节点(直接孩子,孙子不算)
$(s1 + s2)
直接兄弟选择器:在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
$(s1~s2)
后续全部兄弟关系节点选择器:在s1后边获得全部兄弟关系的s2节点
3.基本筛选
first:匹配找到的第一个元素
last:匹配找到的最后一个元素
not:去除所有与给定选择器匹配的元素
even:匹配所有索引值为偶数的元素,从0开始计数
odd:匹配所有索引值为奇数的元素,从0开始计数
eq(index):匹配一个给定索引值的元素,从0开始计数
gt(index):匹配所有大于给定索引值的元素,从0开始计数
lt(index):匹配所有小于给定索引值的元素,从0开始计数
header:匹配如h1,h2,h3之类的标题元素
4.内容过滤选择器
contains:包含内容选择器,获得节点内部必须通过表现包含指定的内容
empty:获得空元素(内部没有任何元素/文本)节点对象
has:内部包含指定元素的选择器
parent:寻找的节点必须作为父元素节点存在(必须是别人的父亲)
属性操作
<input type="text" class="apple orange" id="id" name="name" value="tom" address="beijing"/>
JS:
itnode.属性名称
itnode.属性名称=值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称, 值);
注:自定义的属性例如address,只能通过getAttribute方式。
jquery方式操作属性(attribute):property
$().attr(属性名称); //获得属性信息值
$().attr(属性名称, 值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
css样式操作
$().css(name, value); //设置
$().css(name); //获取
样式获取
jquery可以获取行内、内部、外部的样式,dom方式只能获得行内样式
复合属性样式需要拆分为“具体样式”才可以操作
background需要拆分为background-color background-image等进行操作
border:border-left-style border-left-width border-left-color等
dom对象转换为JQuery对象
$(dom对象)
$(this).prop("checked", !$(this).prop("checked"));
JQuery中attr()和prop()方法的区别
具有true和false两个值的属性,如checked,selected或者disabled使用prop(),其他的使用attr()