一,首先 基础语法
- 美元符号定义jQuery
- 选择符selet 查询和查找HTML元素
- jQuery的action()执行对元素的操作
JQuery是一个快速、简洁的JavaScript框架,对JS的一些功能进行了封装,例如选择ID,className等选择器统一用$定义,06年1月发布,jQuery设计的宗旨是“write Less,Do More”,写的更少做得更多,一段时间的学习后确实如此,代码量相对于JS少了很多
$("#shanchu1").on("click", function () {
// alert(111);
date.splice(index, 1);
saveDate(date); //保存数据
load(); //重新渲染页面
})
区别于JS的印象深的两个方面是触发事件的写法不同了,还有就是jQuery对象和JS对象是不同的,区别于此的原因是不能用jQuery对象调用JS对象的方法,同样JS对象不能调用jQuery对象,但是JS对象和jQuery对象是可以相互转换的
var abc=document.getElementById('abc');
var abc=$(abc);
其实就是又选择了一次
关于jQuery的知识手册,在菜鸟教程有很多,这里就只提一些我认为重要的和遇到的问题
- jQuery增加四种方式,append prepend before after
- before和after是在所选元素后边添加一行代码,而append prepend是在所选元素里边添加代码
- jQuery的删除两种方式,remove empty
- remove删除的是这个元素,empty是删除元素里边的内容
- jQuery的向上遍历三种方式
- parent() 默认向上一级。parents()默认选择所有祖先,可以在括号里填写一个祖先,则指对它选择,parentutil()括号里选择一个对他选择之下的所有元素
- jQuery向下遍历的两种方法
- children()默认选择向下的一个儿子元素,可以选择元素的class独特选择。find()方法,里边写*选择所有后代,写一个元素则只对选择的所有元素有效果
- jQuery同袍同级遍历有七个三大钟
- 1,siblings()是选择除自己外所有的同级元素改变
- 2,next()选择同级的下一个
- 3,,nextAll()选择除自己外,下边所有的元素
- 4,next()选择除自己外 到括号写的同级元素前的所有元素
- 5,6,7prev()和next一样,但是是向上遍历
- jQuery的五种过滤遍历选择
- first()选择首个,last()选择最后一个,eq()选择同级,自动默认当组数组,给每一个相同的元素从0开始编了序号
- fitter()是要满足某种条件表如都有一个相同的class,not()是与之相反
如上述,遍历的方法是jQuery的一个很重哟的板块
还有伪数组和数组的区别在JS会用到很多
还可以实现增删改查的功能,四个基本功能分为
拿出来
function getDate() {
var date = localStorage.getItem("yuanshenUp");
if (date != null) {
return JSON.parse(date);
} else {
return [];
}
}
改一下
$("#test").click(function () {
let local = getDate();
//添加元素
local.push({
// src: $(".tx").src,
"src": img.src,
"Name": $("#name").val(),
"shuxing": $("#shuxing").val()
});
// 保存
saveDate(local);
// 渲染页面
load();
})
改的被称为具体的事件,实现不同的增删改查
存到本地存储
function saveDate(date) {
localStorage.setItem("yuanshenUp", JSON.stringify(date));
}
渲染出来
function load() {
var date = getDate();
// console.log(date);
// 遍历前清空数据
$(".nei-box ul").empty();
// 遍历数据
$.each(date, function (i, n) {
// console.log(n);
$(".nei-box ul").prepend("<li> <img src=" + n.src + " id=" + i + "> <i>" + n.Name + "</i></li>")
})
}