使用jQuery步骤:
1.引入jquery文件 2.获取jq对象 $(选择器) 是jsDOM对象的封装,是类数组的封装对象 注意: 1.jq对象与js对象不同 ,是对js节点的封装 2.调用jq功能只能 通过jq对象,不能通过 js对象 3.js对象与jq对象之间转换问题 js-> jq $(jsDOM) jq->js jq[索引] -> 推荐 jq.get(索引)->了解
jQuery选择器
基础选择器 #id #class 元素 *统配 群组选择器 选择器1,选择器2... 层次选择器 后代选择器 父选择器 子选择器 所有子元素(直接|间接) 子选择器 父选择器>子选择器 只有直接子元素 相邻兄弟 父选择器+子选择器 普通兄弟 父选择器~子选择器 属性选择器 表单选择器 过滤选择器 注意: jsDOM中获取DOM对象如果没有获取到返回null jquery获取jq对象,如果没有获取到返回一个空jq对象,根据length判断是否等于0
属性选择器 [] [属性名] 具有这个属性的元素 [属性名=属性值] 具有这个属性,并且等于指定属性值被选中 表单选择器 : :input 选中所有的input,select,textarea,button都能被选中 :radio :checkbox 过滤选择器 (配合其他选择器一起使用) :checked 被选中的 :selected 被选中的option :eq(index) 获取指定索引位置的元素 :gt(index) 获取大于指定索引的元素 :lt(index) 获取小于指定索引的元素 :even 偶数索引 :odd 奇数索引
操作属性
操作属性: 固有属性 : src,href,id,class... 自定义属性 : 程序猿为元素添加的自定义属性 boolean属性 : checked selected disabled 获取元素的属性值 $().attr("属性名") 可以获取固有属性的值,可以获取自定义属性,boolean结果为对应的值 $().prop("属性名") 可以获取固有属性的值,不可以获取自定义属性,boolean属性结果为true|false 为元素设置属性值 $().attr("属性名","属性值") 可以操作固有属性,自定义属性,boolean属性对应属性值为确定的值 $().prop("属性名","属性值") 只能操作固有属性,boolean属性,值为true|false 删除元素属性 $().removeAttr("属性名") 移出属性 attr,prop两者之间区别 1.attr可以操作所有属性 2.prop只能操作固有属性 3.attr操作boolean属性,value为定值,prop操作boolean,value为true|false 4.boolean属性建议使用prop,其他属性建议使用attr
操作元素的样式 attr(“class”)获取class属性的值,即样式名称 attr(“class”,”样式名”)修改class属性的值,修改样式 ->属性值的覆盖 addClass(“样式名”)添加样式名称 ->属性值的追加 css()添加具体的样式 removeClass(class)移除样式名称
操作值
非表单元素标签对的内容 获取值 html() -> innerHTML 识别标签对中的内容包括元素结构 text() -> innerText 值识别存文本 设置值: html("") text("") 表单元素的值 val() 获取 ->value val("值") 设置
添加元素
创建元素: $(‘元素内容’); 插入到指定位置: prepend(content)在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。 $(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头 append(content)在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。 $(content).appendTo(selector)把 content元素或内容插入selector 元素内, before()在元素前插入指定的元素或内容:$(selector).before(content) after()在元素后插入指定的元素或内容:$(selector).after(content)
删除元素
remove()删除所选元素或指定的子元素,包括整个标签和内容一起删。 empty()清空所选元素的内容
遍历元素
each() $(selector).each(function(index,element)) :遍历元素
事件绑定
ready加载事件 -> window.onload 1.$(function(){ }) 2.jQuery(funciton(){ }) 3.$(document).ready(function(){}) bind事件绑定 jq对象.bind("事件名",函数) 链式绑定 jq对象.bind("事件名",函数).bind("事件名",函数).bind("事件名",函数)... 绑定多个事件