关于jQuery的知识1.0

一，首先 基础语法

• 美元符号定义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>")

                })
            }