《JavaEE》第九周day1学习笔记-jQuery

一、jQuery

(一)jQuery概念


本质是快速且简洁的JavaScript框架(代码库),倡导编写更少的代码,完成更多的事情,封装了大量常用的代码,优化文档操作、事务处理、动画设计和AJAX交互。

(二)起步


目前,jQuery已完成三个大版本的迭代
1.x版本:兼容ie6、ie7、ie8,使用最广泛,最终版本为1.12.4 (2016年5月20日更新);
2.x版本:不兼容ie6、ie7、ie8,最终版本为2.2.4 (2016年5月20日更新);
3.x版本:不兼容ie6、ie7、ie8,只支持最新一代的浏览器,通常不会在生产环境中使用。
其中,jQuery需要通过<script>标签导入.js文件启用(开始使用前建议检查依赖路径是否正常),jquery-xxx.js/jquery-xxx.min.js均可使用。

(三)JavaScript对象与jQuery对象


两者不同质,对象属性及方法不通用,jQuery对象在操纵时更加便捷。
JavaScript对象→jQuery对象:$(JavaScript对象)
jQuery对象→JavaScript对象:jQuery对象[索引]、jQuery对象.get[索引]

二、使用jQuery

jQuery使用$(document).ready(function(){})入口函数,作为jQuery语句的起点;该函数可简化为$(function(){}),类似于window.onload,在DOM树完全加载后再执行相应的JavaScript方法;不同点是jQuery启动函数可多次定义,window.onload仅能定义一次。

(一)选择器


1.基本选择器

$("#id属性值"):id选择器;
$(".class属性值"):类选择器;
$("标签名称"):标签选择器;
$("*"):全选选择器;
$("selector1,selector2,selectorN"):并集选择器;

2.层级选择器

$("ancestor descendant"):后代选择器;
$("parent > child"):子选择器;

3.属性选择器

$("[attribute]"):属性名称选择器
$("[attribute=value]"):属性值选择器
$("[attribute!=value]"):属性值(非)选择器
$("[attribute^=value]"):属性值(开始)选择器
$("[attribute$=value]"):属性值(结束)选择器
$("[attribute*=value]"):属性值(存在)选择器
$("[[attrSel1][attrSel2][attrSelN]]"):复合属性值选择器

4.过滤选择器

$("X:first"):首元素选择器
$("X:last "):尾元素选择器
$("X :not(selector)"):非选择器
$("X:even"):偶数选择器
$("X :odd"):奇数选择器
$("X:eq(index)"):等于(索引)选择器
$("X:gt(index)"):大于(索引)选择器
$("X:lt(index)"):小于(索引)选择器
$("X:header"):标题(获取h1~h6元素)选择器

5.表单选择器

$("X:input"):输入表单选择器
$("X:checkbox"):多选框表单选择器
$("X:button"):按钮表单选择器
$("X:enabled"):可用元素选择器
$("X:disabled"):不可用元素选择器
$("X:checked"):单选/复选框旋选中元素选择器
$("X:selected"):下拉列表选中元素选择器

(二)属性


$("X").attr(name|pro|key,val|fn):获取/设置元素属性值
$("X").removeAttr(name):删除元素属性值
$("X").prop(n|p|k,v|f):获取/设置DOM内置元素属性值(推荐使用)
$("X").removeProp(name):删除元素DOM内置元素属性值
$("X").addClass(class|fn):增加class属性
$("X").removeClass([class|fn]):删除class属性
$("X").toggleClass(class|fn[,sw]):切换class属性
$("X").html([val|fn]):获取元素的内容(含html标签,不包含本级)
$("X").text([val|fn]):获取元素的内容(纯文本)
$("X").val([val|fn|arr]):获取元素的value属性值
$("X").css(name|pro|[,val|fn]):设置元素的CSS属性

(三)文档


$("X").append($("Y")):添加至X内部末尾→X(OY)
$("X").appendTo($("Y")):添加至Y内部末尾→Y(OX)
$("X").prepend($("Y")):添加至X内部开头→X(YO)
$("X").prependTo($("Y")):添加至Y内部开头→Y(XO)
$("X").after($("Y")):添加至X平级末尾→X(O)Y
$("X").before($("Y")):添加至Y平级末尾→Y(O)X
$("X").insertAfter($("Y")):添加至X平级开头→YX(O)
$("X").insertBefore($("Y")):添加至Y平级开头→XY(O)
$("X").remove():移除元素
$("X").empty():清空后代元素,保留本级
发布了31 篇原创文章 · 获赞 0 · 访问量 794

猜你喜欢

转载自blog.csdn.net/u010761121/article/details/103963717