jquery: javascript库
write less ,do more
使用版本:
jquery-3.3.1.min.js 压缩版 发布版 84KB
jquery-3.3.1.js 压缩版 开发版 265KB
开发工具 记事本 工作时建议用webStorm
引入jQuery
在head标签中 <script type="text/javascript" src="js/jquery-3.3.1.js">
如果页面出错但不提示的话,考虑html出错
使用
$(document).ready(function(){ }); 初始化函数 网页中dom元素(网页结构)全部加载完毕后执行 可以写多个
onload: javascript, 初始化函数, 网页中全部元素全部加载完毕后执行 只能写一个
jquery初始化函数简化写法: $(function(){...}); $代表jquery
dom模型
将html xml 等文档结构的标签语言 看成dom模型
dom节点有三种类型:
元素节点:<html> <ul>
属性节点:title stc img
文本节点:标签的文本
dom对象:
以上三种节点的具体对象,就是dom对象 凡是javaScript能够直接操作的对象,就是dom对象
例如 var title = document.getElementById("MyTitle"); 用js拿到的title对象,就是一个dom对象 p对象
jquery对象
凡是jQuery能够直接操作的对象,就是jQuery对象
注意:
dom对象只适用于js语法 jquery对象适用于jquery语法
同样一个元素,既可以成为dom对象 也可以成为一个jQuery对象
命名建议 js对象直接写, jquery对象在前面加上$
dom对象和jquery对象的转化:
dom --> jquery : jquery工厂,$(dom对象)
jquery --> dom :
基础 :jquery对象默认是一个数组或集合 dom对象默认是一个单独的对象
数组: jquery对象[0]
集合:jquery对象.get(0)
jQuery选择器: jquery的根基
基本选择器:
标签选择器:$("标签名") $("p").html() 获取p标签对象 jquery对象形式
类选择器: $(".class值")
id选择器: $("#id值")
并集选择器: 或 逗号 $(".class值,#id值") $(.mystyle,MyTitle)
交集选择器: 与 连续直接写 满足同时存在 $("标签名.class值") $("p.mystyle") 不能出现歧义
全局选择器: $("*") 选中全部元素
层次选择器:
相邻选择器(后面相邻) + $("选择器1+选择器2") $("#b+li").html()
同辈选择器 (后) ~ $("选择器1~选择器2") $("#b~li").length
后代选择器 空格 $("选择器1 选择器2") $("body li")
子代选择器 > $("选择器1>选择器2") $("ul>li")
属性选择器: []
$("[属性名]") $("[class]") 选中全部元素中 有class属性的元素
$("[属性名=属性值]") $("[class=mystyle]") 选中有class属性且属性值为mystyle的元素
$("[class!=a]") 有class但是值不等于a 没有class属性
$("[class^=a]") class值以a开头的元素
$("[class$=a]") class值以a结尾的元素
$("[class*=a]") class值包含a的元素
过滤选择器 : 过滤选择器和一些方法类似 (从0开始)
基本过滤选择器
:first 最开头的那个元素
:last 最后那个元素
:even 偶数元素
:odd 奇数元素
:eq(index) 第index个元素
:gt(index) 大于index的全部元素
:lt(index) 小于index的全部元素
:not(选择器) 除了选择器以外的全部元素
:header 选中除了标题元素以外的全部元素
:focus 获取当前焦点的元素(光标所在元素)
可见性选择器
:visible 选取所有可见的元素
:hidden 选取所有隐藏的元素
事件:
js: OnXxx
onclick(); 写在<script>内,ready()外
jquery: 没有on
click(); 写在ready()内
windows事件: ready();
鼠标事件: click() 单击事件 mouseover():鼠标悬浮 mouseout(): 鼠标移开
键盘事件:keydown():按下 keyup():松开
可以通过event.keyCode指定具体的按键
表单事件
focus() 获取光标
blur() 失去光标
绑定事件: $(…).bind(“事件名”,[数据],函数);
$(...).click(); ----> $(...).bind("click",function(){...});
批量绑定: $(...).bind({"click":function(){...},"keydown":function(){...},批量事件});
移除事件:$(…).unbind(“事件名”);
前端的一些事件、方法会在某种情况下失效、 要注意兼容问题
详看官网 www.w3school.com.cn/tags/html_ref_eventattributes.asp
操作DOM
1.样式操作
a.设置css()
jquery对象.css("属性名","属性值")
jquery对象.css({"属性名":"属性值","属性名":"属性值",....})
b.追加或移除样式class()
addClass("x");
addClass("x x x");
removeClass(x);
removeClass(x x);
removeClass(): 移除全部样式
toggleClass(""):切换追加与移除
2.内容操作
html() 获取值 获取的是元素的全部内容, 包含元素内部的各种标签
html(xxx):设置值 先渲染,后显示
text() 获取值 获取文本值
text(xxx) 设置值 将xxx原封不动的显示
val(): 获取值 获取value值
val(xxx) 设置值 设置value的值
3.节点与属性操作
节点:
查询节点: (jquery选择器)
创建节点: $() jquery工厂 $(html字符串) 例: $("<li>xxx</li>")
插入节点:
内部插入:var $element = $("<li>ggggg</li>");
$("ul").append($element); $element.appendTo($("ul"));
$("ul").prepend($element); $element.prependTo($("ul"));
外部插入: var $element = $("<p>hello jquery</p>");
$("ul").after($element); $element.insertAfter($("ul"));
$("ul").before($element); $element.insertBefore($("ul"));
替换节点:把$X换成$Y $X.replaceWith(Y) $Y.replaceAll(X)
删除节点:
remove(): 彻底删除
detach(): 将节点删除,但关联的事件、数据不会删除(不推荐使用)
empty(): 只删除内容
复制节点:
clone(true|false)
属性操作:
attr("属性名") 获取属性值
attr("属性名","属性值") 设置属性值
attr({"属性名":"属性值","属性名":"属性值",....});
删除属性值 removeAttr("属性名");
4.获取集合与遍历集合
子节点集合: children()
$(..).children("li");
后代节点集合 find()
$(..).find("li"); 不推荐使用,损耗性能
同辈节点集合
next() 后一个
prev() 前一个
siblings() 全部同辈
前辈节点集合
parent(): 父代
parents(): 所有祖代
过滤集合:
很多方法的()就是一个过滤选择器:
filter("选择器。。。");
遍历集合:
$(...).each(function(index,element){
alert(index+","+$(this).html()+","+$(element).html());
});
CSSDom操作:
height() width() 获取值
height(300) width(300) 设置值
offset() 偏移量(以左上角为基准) .left .top
$("#divId2").offset(function(index,oldOffset){
var newOffset = new Object();
newOffset.left = oldOffset.left+200;
newOffset.top = oldOffset.top+100;
return newOffset;
});
offsetParent() 获取已定位的父元素
定位: 元素的position属性(默认为static)被设置为了 relative absoulte 或fixed
scrollLet() 滚动条定位
scrollTop()
表单校验: 重点!!
1.获取要校验的元素值 用户名 密码 (选择器)
2.通过 字符串处理方法 或者 正则表达式等手段进行校验
3.触发校验的方法或事件(校验的时机)
blur() : 失去光标时触发
submit(): 点击表单的 提交按钮时触发
js:
onblur="" onsubmit=""
正则表达式: 用于定义规则
正则表达式.test(校验值);
使用规则 百度搜一下