jquery 轻便灵活的javascript框架,宗旨写得更少做得更多
使用jquery需要先引入jquery库(jquery文件),引入js文件的script标签内不可以编写代码
jquery的所有的操作都是方法,jquery的操作是链式的,也就是在完成一个方法后可以马上执行后面的方法:
对象.方法1().方法2().方法3()
jquery最强大的核心功能是jquery的选择器,替代传统javascript DOM操作寻找元素的繁琐的操作。更加灵活
作用:用来寻找页面元素对象,使用jquery选择器获得的元素对象不是dom对象,而是jquery对象
区别在于dom对象可以使用javascript的语法,dom象.innerHTML
jquery对象只能使用jquery提供的语法,但是两者之间可以互相转换
选择器语法:
$( selector,seletor2 ) 也可以jQuery( selector ) $表示JQUERY
里面写具体的选择器
1.基本选择器
id选择器 #开头,得到一个对象
通配符选择器 *
标签选择器 标签名为选择器名
类选择器 .开头
2.层次选择器
子选择器 $(selector1>selector2)
后代选择器 $(selector1 selector2)
相邻的所有 $(selector1~selector2) 或者 siblings()
相邻的上一个 prev()
相邻的下一个 $(selector1+selector2) 或者用next()
同级之前的元素 prevAll()
相邻之后的元素 nextAll() 或者
注意:使用next,prev等方法需要在括号里写选择器语法
3.过滤选择器
$(selector:语法)
:first 取得第一个 first()
:last 最后一个 last()
:eq(下标) 等于某一个下标 eq(0)
:not(selector) 排除 not()
:gt(下标) 大于某个下标
:lt(下标) 小于某个下标
:odd 奇数
:even 偶数
4.表单选择器
:input
:text
:password
:radio
:checkbox
:button
:submit
:reset
:image
:file
:hidden
5.可见过滤
:hidden 匹配所有的不可见的,display:none visibility:hidden
:visible 匹配所有可见的
6.可用禁用
:disabled 匹配禁用元素
:enabled 匹配可用
7.选中 :checked :selected
:checked 匹配被选中的单选或者复选按钮
:selected 匹配选中的下拉列表框
筛选的方法
$(selector).children(selector)找儿子
$(selector).find(selector) 找后代
$(selector).parent() 默认找直接上一级元素,也可以写选择器
$(selector).parents("div") 往上寻找,不限制父级,包括祖
级
常用方法,属性操作
html() 对应着innerHTML,不给参就取值,给参就赋值
text() 对应innerText
val() 对应表单元素的value属性
attr(name,value) 全称attribute,用来操作元素的属性,所有属性可操作
只给一个参数表示获得这个属性的值,给两个参数表示取值
removeAttr("属性名") 删除这个属性
prop() 全称property用来操作元素的属性,固有属性可操作
只给一个参数表示获得这个属性的值,给两个参数表示取值
removeProp("属性名") 删除这个属性
内容操作
$(选择器).append(内容) 往一个元素的末尾出追加内容
css操作
对象.css()方法用来操作元素的css属性,可以用来获得属性或者赋予属性
css("backgroundColor")只写一个参数的时候表示得到这个属性
css("backgroundColor","red") 两个参数表示赋值
css({ 属性:值,属性:值}) 多个属性用逗号分割,属性和属性值用:分割
dom和jquery对象之间转换
$(jq对象)[0] 转换成dom
$(dom对象) 就变为了jquery对象
jquery事件都是绑定函数
$(选择器).事件名(function(){});表示当元素触发了这个事件就调用匿名函数内的代码
$(document).ready(function(){}); $(function(){});
和window.onload相同,但是window.onload一个网页只能有一个
ready可以写任意个数.onload必须等到内容也加载完毕才执行,
ready只需要dom节点加载完毕就执行