简介
JavaScript的框架,用于简化js代码的工具
导入外部的js
<script src="jquery-1.0.10.2.min.js"></script>
这个包是jquery的工具包
jquery选择器
基本选择器
1. 元素选择器
$('p')
2. id选择器
$("#id")
3. class选择器
$(".classname")
4. 全选择器
$("*")
5. 多选择器共用
$("p.pc") p标签且类名为pc的标签
总结:
其实和js一样,jquery只是对代码简化。
区别:
使用$获取的是juery对象,而用document获取的是dom对象,
两个的方法不能混用。
原因:
jquery有自己的工具包
转化:
jquery->dom jquery[index]或jquery,get(index)
dom->jquery $(dom)
层级选择器
6. 后代选择器:
$("div span") 空格隔开
7. 父子选择器
$("p>span") 大于号
8. 后续紧邻兄弟选择器
$("p+span") +号
9. 后续所有兄弟
$("p~span") ~线
基本过滤选择器
:first 选取第一个
:last 最后一个
:eq(index) 索引取
:gt(index) 大于index的
:lt(index) 小于index的
:odd 索引为奇数的
:even 索引为偶数,注意下标是从0开始的
:not("p") 非p标签的
内容过滤选择器
:contains(ele) 模糊匹配,含有元素的
:empty 空的标签
:parent 有内容的
:has("p") 后代有p标签的
属性过滤选择器
$('[name]') 有name属性的
$('[name=tom]') name属性为tom的,tom的引号可加可不加
$("div[name='abc']") div标签下name为abc的
可见性过滤选择器
:visible 可见元素
:hidden 隐藏的元素
表单选择器
:input 所有的input元素
:checked 所有的单选框和复选框
:selected 下拉框
对象遍历
eq(index) 取值
each(function(){
console.log(this)
}) 方法,参数是函数
事件注册
代码的执行在页面加载之后,相当于onload
$(document).ready(function(){})
#(function(){}) 简写形式
事件函数
鼠标事件 | 键盘事件 | 表单事件 |
---|---|---|
click() | keypress() | submit() |
dblclick() | keydown() | change() |
mouseover() | keyup() | focus() |
mousemove() | blur() | |
mouseout() | ||
toggle() | ||
hover() |
jquery.toggle() 设置按钮对jquery隐藏
hover(function(){},function(){}) 两个选择的时候使用
取值
text() 文本内容,等同innerTEXT
html() 页面内容 innerHTML
val() 值 val
获取属性
attr("属性名","值") 当一个的时候,是获取属性名的值,
两个的时候是改值,多个改值的时候,需要用键值对的形式
removeAttr("属性值") 删除标签的属性
prop() 和attr差不多
添加元素
append() 子元素,被选元素的最后一个位置
prepend() 子元素,开头插入
after() 在被选元素的后面
before() 之前
删除元素
remove() 删除元素
empty() 清空元素
css类
addClass() 添加css的样式
removeClass() 删除样式,用类名删除
css方法
css('属性名','值') 更改css的样式
改多个值的时候,需要用键值对的形式
总结
jquery和javascript的区别是:时间注册的时候,少了的on,然后把JavaScript里面的属性,改变成了方法