- 什么是jQuery? jquery 是 js的封装的一个框架 快速开发 * 优点:写的少 做的比较多 处理浏览器之间的兼容性 * 把js的大量语法进行封装 * 大量的方法 * 大量的学习方法和dom之类 jquery库 在head body里面都是可以引入 * 在写jquery 代码的时候先引入jquery文件(库) * 才能去写常规的jquery代码 * (先跑库代码 在走写的jquery代码)
<script src="jquery/jquery.js"></script>
window.jQuery==window.$=jQuery
所以在jquery里面书写是用$
- jquery dom获取的时候注意元素是否初始化.若不考虑是否初始化 需要以下加载函数 注意:jquery 加载函数 类似 浏览器的加载完成事件window.onload
$(document).ready(function () {
console.log("加载完成");
console.log($("#btn"));
});
简写为
$(function(){
})
- dom元素获取方式
注意:jquery对象返回的是一个集合 直接使用
jquery 代码可以进行隐式迭代器 (可以进行一堆的操作) 1)基本选择器 id class 元素 * 复合元素选取$("button,input") 2)层次选择器
获取子元素 +获取下一个元素 ~获取当前元素后面的所有元素 以及空格 3)基本筛选器 first last not除了当前的其他所有元素 even odd 按照索引的奇数偶数来获取 eq gt lt获取等于 大于 小于索引的元素 header获取所有的h标签
focus 获得获焦的元素 root 直接获取html 4)内容选择器 contains 包含某内容 empty空元素 has包含某个元素 parent 匹配的元素必须是父元素 5)可见性 hidden隐藏 visible显示 6)属性 [attribute]包含某属性的元素 [attribute=value]//指定获取某元素满足属性=属性值 [attribute!=value]//属性不等于该值的或者不含有该属性的 [attribute^=value]//以什么开头 [attribute$=value]//以什么结尾 [attribute*=value]//包含某值 $("button[attrSel1][attrSel2][attrSelN]")三者都具备都有的元素 $("button[id='btn'][class='btn']")//两个都要满足与的关系 $("button[id!='btn'][class!='btn']");//有id就考虑id是不是不等于该值 没有id就只考虑class是否满足条件 若满足就可获取 7)子元素过滤选择器 :first-child 第一个孩子 :first-of-type1.9+ 如果写指定标签 获取指定标签里面的第一个 如果没写 获取所有类型标签里面的第一个 :last-of-type1.9+ 匹配同类型的最后一个 :nth-child 第几个孩子 1开始 :nth-last-child()1.9+ 倒着说第几个孩子 1开始 :nth-last-of-type()1.9+ 后往前 按类型获取标签里面的最后一个 :nth-of-type()1.9+ 前往后 按类型获取标签里面的第n个 :only-child 匹配的元素必须是父元素的唯一子元素 :only-of-type1.9+*/ 获取父元素里面同类型标签里面只有唯一的一个标签 全部获取到 8)表单元素选择器 :input 匹配所有 input, textarea, select 和 button 元素 :text 获取单行文本框的 :password 获取密码框的 :radio //获取单选按钮的 :checkbox //获取复选框的 :submit //获取表单提交的 :image :reset 获取重置按钮 :button 获取button :file 获取文件路径