JQuery笔记

// sessionStorage 存储
sessionStorage.setItem('id', 'tujiawei');
// sessionStorage.key = 'value';
sessionStorage.pwd = 'tujiawei123';

// 读取
var id = sessionStorage.getItem('id');
console.log(id);

// 清除
sessionStorage.clear();

// localStorage与上面的相同


// webSQL 
var db;
// 创建数据表
function CreateTrans_Click() {
    db = openDatabase('Student', '1.0', 'StuManage', 2*1024*1024);
    if(db) {
        var strSQL = 'create table if not exists StuInfo';
        strSQL += "(SudID unique, Name text, Sex text, Score int)";
        console.log(strSQL);
        db.transaction(function (tx) {
            tx.executeSql(strSQL);
        },
        function () {
            Status_Handle('创建数据表出错！');
        },
        function () {
            Status_Handle('创建数据表成功!');
        });
    }
}

function Status_Handle(msg) {
    $('p').html(msg);
}


CreateTrans_Click();

// 删除数据表
function dropTable() {
    db.transaction(function (tx) {
        tx.executeSql('drop table Student');
    }, function () {
        Status_Handle('删除成功');
    }, function () {
        Status_Handle('删除失败');
    }
    );
}
dropTable();

// jQuery改变this指向
$('button').click($.proxy(obj.test, obj));
$('button').click($.proxy(obj, 'test'));

// 扩展jquery
$.extend({
    hello : function () {
        console.log(1);
    }
});
// 可以扩展对象，增加或者覆盖属性名

// jQuery 自定义伪类选择器
$.extend($.expr[':'], {
    withRel : function (obj) {
        return ($(obj).attr('rel'));
    }
});

$(function () {
    $('div:withRel()').addClass('two');
});

// jQuery 核心方法：
// size()    length get() get(index)
// each() index()  data()

// jquery冲突解决
// 如果$()已经被用过了，可以用jQuery()

// 把DOM对象转换为jquery对象

$(DOM);
// DOM --> jqueryObj

$(DOM)[0];
// jqueryObj --> DOm  也可以用$(DOM).get(0)

// each遍历jQuery对象，不用考虑闭包，写回调函数，里面可以加i实现0-n-1

// 查找对象在所有对象里面是第几个
idx = $(this).index('div');

// eq找第i个jQuery对象
// not排除
// show显示
// hide隐藏

// 可视区域的高
$(window).height();

// 文档总高度
$(document).height();

// 滚动的高
$(window).scrollTop();

offset();
position();
scrollTot(val);

// live()
// 新加入的元素绑定事件

// 不动标签的属性，对象属性改过，不影响标签
$(this).data({'num': 1});

$('img').hover( 
    // 鼠标移入后将图片向左滑动100px，用100ms来完成
    function () {
        
        $(this).animate({
            'margin-left': '-100px',
        },100);
    },
    // 鼠标移入后将图片向右滑动100px，用100ms来完成
    function () {
        $(this).animate({
            'margin-left': '0px',
        },100);
    }
);

// 切换，想要来回切换需要两次调用
$('img').toggle(1500,
    function () {

    }
)

$('*').css({
    margin: 0,
    padding: 0,
})

// slideDown()        移除
// fadaIn()      淡入

View Code

 

转载于:https://www.cnblogs.com/tujw/p/10507018.html