jQuery01:
特点: DOM操作相对比较简单 选元素 改样式 改属性 改内容
引入:<srcript src="路径"></script>
1.$关键字 让渡 noConfict()
作用1:
window.οnlοad=function(){
//页面元素加载完成之后
}
$(function(){
});
区别:
a:window.onload 等待页面元素(图片)全部加载完成之后才执行
$(); dom元素加载完成之后就可以执行
b: window.onload 在页面中只执行一次 后面的会覆盖前面的
$(); 可以执行多次
作用2:快速的选出页面的中DOM元素 $("选择器")
结合CSS中的所有的选择器来选择元素
id选择器 $("#id选择器")
类选择器 $(".类选择器")
标签选择 $("标签名称选择器")
问题:
用$选择出来的元素 被称为jQuery对象 用原生js代码选出来的是DOM对象
方法不可以混用
转换
jquery对象--->原生DOM对象 $("#id")[0]
原生DOM对象-->jQuery对象 $(document.getElementById(""))
2.选出元素的几个常用方法:
①eq(n) 获取第n个元素的方法
②:gt(n) $("li:gt(2)") 获取从n+1个开始所有的元素
③find() 在某个元素中去查找满足第二选择器条件的元素
在A1宿舍楼里面找学生会的学生---->学生
④has() 找到包含第二选择器的某个元素
在A1宿舍楼找到包含学生会学生的寝室--->寝室
⑤filter() 在第一个选择器的基础上过滤出满足第二个选择器的元素
⑤not() 在第一个选择器的基础上过滤出不包含第二个选择器的元素
3.根据层级关系选元素
4.元素的创建/插入/删除/复制操作:
A:创建一个标签
var obj=$("<p>我是一个p标签</p>");
B: 把元素添加进去
A.append("B"); 把B元素加入到A元素内部结尾处
A.appendTo("B"); 把A元素加入到B元素内部结尾处
A.prepend("B"); 把B元素加入到A元素内部开头处
A.prependTo("B"); 把A元素加入到B元素内部开头处
A.after("B") 把B元素加入到A元素外部后面
A.insertAfter("B") 把A元素加入到B元素外部后面
A.before("B") 把B元素加入到A元素外部前面
A.insertBefore("B") 把A元素加入到B元素外部前面
C:删除某个元素
empty(); //清空 清除内容
remove(); //清除元素
d: 复制
clone(); //复制一个一模一样的
5.修改元素内容
.text() 不解析html
.html() 解析html
.val() 设置表单元素的内容
6.获得元素的下标
.index() 返回是其父元素的第几个元素
7.修改样式:
.css("样式名称","值");
.css({"样式名称":"值","样式名称":"值"});
//加入的是行内样式 优先级较高 注意使用
addClass() 添加某个class样式
removeClass() 移除某个class样式
8.修改属性
.attr("属性","值"); //修改属性
.attr("属性"); //查看属性
.removeAttr("属性"); //删除属性
--做原生属性的修改 img:src input:checked
.prop("属性","值"); //修改属性
.prop("属性"); //查看属性
.removeProp("属性"); //删除属性
9.元素的遍历
each(function(index){
$(this) //每一个元素
index //从0开始数的下标
});
jQuery链:
链式编程 一句代码编写很多个操作 本质原因是jquery方法返回的都是jquery对象
$("p").find("span").addClass("c1").addClass("c2");
span + class="c1"
span + class="c2"
$("p").find("span").addClass("c1").end().addClass("c2");
end():终止当前操作对象 返回上一个操作对象
span + class=“c1”
p + class="c2"
$("p").find("span").addClass("c1").andSelf().addClass("c2");
andSelf(); 终止当前操作对象返回上一个对象和当前对象
span + class=“c1”
p span +class="c2"
选择器:
标签选择器 类选择器 id选择器
1. * 用于选中所有的元素
2. > 用于选中父子关系节点
3. 空格 div p p只要包含在div中即可选中
4. , div,p{color:red;} 多个选择器之间共用同一个样式
div{color:red;}
p{color:red;}
5. + 毗邻元素选择器E+F 匹配紧邻E元素之后的同级F元素
6. ~ 毗邻元素选择器E~F 匹配E元素之后的同级F元素
7. 属性选择器: 表单
E[attr] 匹配有这个属性
E[attr="值"] 匹配有这个属性并且值相等
E[attr*="值"] 匹配有这个属性值包含指定的数据
E[attr^="值"] 匹配有这个属性值以指定的数据开头
E[attr$="值"] 匹配有这个属性值以指定的数据结尾
8.伪类选择器:
选个数:
:nth-child(n)
p:nth-child(2) p标签 是在其父元素必须排第二个
:nth-of-type(n)
p:nth-of-type(2) p标签 在其父元素中第二个P标签
:nth-child(1) === :first-child
:nth-of-type(1)===:first-of-type
:nth-child(2n) :nth-child(even) 偶数
:nth-child(2n+1) :nth-child(odd) 奇数
动态(状态)伪类:
:hover 鼠标移动上去
:link 默认状态
:active 激活 点击下去没松手
:visited 点击完成后
:focus 获得焦点 表单
:selected 下拉列表中被选中的项
:checked 单选按钮/复选框选中的项
:disabled 选中被禁用
:enabled 选中启用
9.伪元素选择器:
::first-letter 第一个字母
::first-line 第一行
::after 在后面加内容
::before 在前面加内容
::selection 选中区域的效果
10CSS权重计算方式:
计算表
权重值 A B C D
类型
行内样式 1 0 0 0 (1000)
Id 0 1 0 0 (100)
class/属性 0 0 1 0 (10)
标签/伪类 0 0 0 1 (1)
继承 0 0 0 0 (0)
!important 忽略权重计算规则 以此为准