jQuery学习笔记

jQuery笔记1

1，简介
jQuery是JavaScript函数库，我们只需要调用相应的方法，宗旨是用最少的方法完成最复杂的功能。版本1.？兼容IE8，版本2.？不兼容IE8。1.9-1.11的版本差别不是很大。不要使用1.9以下的版本。
2，特点
2-1，核心库只有几十kb
2-2，代码简洁，支持链式代码风格
2-3，跨平台，jQuery对各种浏览器都保持了很好的兼容性，可大幅提高前端开发测试效率
2-4，高性能
2-5，插件众多
下面是辅助代码：

<div id="box">
    <P>测试</P>
</div>
<div>
 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>

快速生成li标签方法：li{$}10
3，/1,$可以传匿名函数（）{}/
$(function (){
/2,传页面元素选择器，：返回的是jQuery对象
* 主要是对原始DOM对象进行了一个封装
* jQuery提供了统一的API（属性和方法）都能够使用*/
$("#box").css("color","red");
console.log($);//返回初始化函数
console.log($());//调用一下初始化函数
console.log($("#box"));//返回的是jQuery对象
console.log($("#box").css("color","red"));//返回的还是jQuery对象

    $("#box").css("color","red").css("font-size","50px");
    console.log($("#box").css("color","red").css("font-size","50px"));
    /*上述还是返回jQuery对象，这是链式代码风格的原理，每次操作后都是返回jQuery对象*/

});
4，关于window.onload和$(document).ready(function(){})的区别
/*1，window.onload
* 页面加载完毕：html，css，所有资源（包括图片视频等）全部加载完以后执行里面的内容
* 只能写一次，会覆盖
*
2，$(document).ready(function(){})
* 只需要等待DOM结构加载完毕就可以执行，加载DOM结构很快，使用这个不用等图片或者视频加载完就可以执行
* 可以执行多次，不会被覆盖
* 简写$(function(){...})
* 另外一种写法，匿名函数自动执行，把jQuery对象传参数进去，目的是为了避免和其他函数库发生冲突
* (function ($){
* 代码
* })(jQuery)
*
* 3，如果必须要等资源加载完，则使用jQuery提供的方法
* $(window).load(function(){...})
* 可以使用多次，不会被覆盖/
5，jQuery-DOM选择器如何使用
5-1，css2基本选择器和符合选择器都能正常使用：$("#id")，$(".class")，$("tag")
例如：
$(function (){
var myli=$("div ul li");获取上述结构中的li标签对象
console.log(myli);
console.log(myli.length);
//返回10， length是jquery里提供的属性
如果在DOM中直接使用length是不能够有结果的：
console.log(document.getElementById("box").length);
//返回undefined，length不是原生的方法，可以用在获取document.getElementsByTagName()和document.getElementsByClassName()中
DOM对象和jQuery对象之间的互换
//打印DOM对象
console.log(document.getElementById("box"));
//打印jQuery对象
console.log($("#box"));
//把jQuery对象转换为DOM对象
console.log($("#box").get(0));
//把原生DOM对象转换为jQuery对象
console.log($(document.getElementById("box")));
});
5-2，对input标签内容进行更改
DOM结构：
<div id="txt">
<input type="text">
<button onclick="getValue()">点击获取值</button>
<button onclick="setValue()">点击设置值</button>
</div>

function getValue(){
    console.log("==========");
    var mytxt=$("input[type='text']").val();//jquery对象获取value的方法
    console.log(mytxt);
}

function setValue(){
$("input[type='text']").val("你好")
}
5-3，对html结构进行更改
DOM结构
<div id="box">
<P>测试</P>
</div>
<button onclick="getHTML()">获取HTML</button>
<button onclick="setHTML()">设置HTML</button>
<button onclick="addHTML()">addHTML</button>

//对元素属性进行操作
//获取
function getAttr(){
    console.log($("#input1").attr("type"))
}
//设置,可以设置任何属性
//attr（“属性名”，“值”）
function setAttr(){
    $("#input1").attr("type","text")
}
function setAttr(){
    $("#input1").attr("class","myclass")
}
//设置多个属性值
//attr({"属性1"："值1","属性2":"值2"})
function setAttr(){
    $("#input1").attr({"class":"myclass","id":"myinput1"})
}
//移除属性值
function removeAttr(){
    $("#input1").removeAttr("class")
}

</script>
5-5，对标签的class操作
DOM结构
<style>
/#box{/
/color:red;/
/}/
/.myclass{/
/border:1px solid black;/
/}/
/.myclass1{/
/background-color: red;/
/}/
.red{
color: red;
}
.blue{
color: blue;
}
.yellow{
color: yellow;
}
</style>
<body>
<div id="box">
测试
</div>
<button onclick="mytoggleclass()">class切换</button>
</body>
<script>
$(function(){
//获取单个CSS样式
console.log($("#box").css("color"));
//获取多个CSS样式
console.log($("#box").css(["color","width","height"]));
//设置单个CSS样式
$("#box").css("background-color","green");
//设置多个CSS样式,以传送对象来设置多个CSS样式
$("#box").css({"height":"100px","width":"1366px"});
//添加CSS class
$("#box").addClass("myclass myclass1");
//移除class指定的值
$("#box").removeClass("myclass");
//与attr不同的是能移除或者添加指定的属性值，而removeAttr将所有class移除，移除的是属性，而不是值
});
//class之间的切换
function mytoggleclass(){
/如果存在（不存在）就删除（添加）一个类/
$("#box").toggleClass("yellow");
/如果写两个的话，就会被覆盖/
$("#box").toggleClass("yellow blue");
/这时需要写判断/
/* 语法是：toggleClass(function (){
return 最终要切换的值
})*/
$("#box").toggleClass(function (){
return $("#box").hasClass("blue")?"yellow":"blue";
})
}
</script>
6，jQuery-DOM节点操作
DOM结构
<style>
#main{
width: 1366px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div id="main">我是main</div>
<p>P元素</p>
<h1>内部操作节点：</h1>
<button onclick="myAppend()">依次插入节点到main节点内部后面</button>
<button onclick="myAppendto()">移动节点到main节点内部最后面</button>
<button onclick="myPrepend()">依次插入节点到main节点内部前面</button>
<button onclick="myPrependto()">移动节点到main节点内部最前面</button>
<h1>外部操作节点：</h1>
<button onclick="myafter()">移动到main节点外部之后</button>
<button onclick="myinsertafter()">main节点外后插入</button>
<button onclick="mybefore()">移动到main节点外部之前</button>
<button onclick="myinsertbefore()">main节点外前插入</button>
<h1>包裹</h1>
<button onclick="mywrap()">指定节点包裹</button>
<button onclick="myunwrap()">移除包裹</button>

<h1>复制，删除，替换</h1>
<button onclick="myclone()">复制节点</button>
<button onclick="mydelete()">删除节点</button>
<button onclick="myreplace()">替换节点</button>
</body>
<script>
//节点内部操作
function myAppend(){
var newbox=$("<div>新添加的节点</div>");
$("#main").append(newbox).css("height","auto");
}
function myAppendto(){
$("p").appendTo($("#main"))
}
function myPrepend(){
$("#main").prepend("<span>我是sapn</span>")
}
function myPrependto(){
$("p").prependTo($("#main"))
}

//节点外部操作
function myafter(){
    $("#main").after($("span"));
}
function myinsertafter(){
    $("<span>我是sapn</span>").insertAfter("#main")
}
function mybefore(){
    $("#main").before($("span"));
}
function myinsertbefore(){
    $("<span>我是sapn</span>").insertBefore("#main")
}

//包裹
function mywrap(){
    //为每一个span元素包裹一层div
    $("span").wrap("<div></div>")
    //包裹所有
    $("span").wrapAll("<div></div>")
}

//移除包裹
function myunwrap(){
    //每次只移除一层包裹，可以连续调用
    $("span").unwrap().unwrap()
}

//复制，删除，
function myclone(){
    /*clone(true)表示复制元素和内容加上事件处理行为
    * clone()只有元素和内容*/
    $("p").clone();//只是复制了，不会有任何变化，需要操作
    $("p").clone().appendTo($("#main"));
}
function mydelete(){
    $("p").remove();
}
function myreplace(){
    $("span").replaceWith("<div>替换的内容</div>")
}

</script>

最后编辑于：2018.06.21 10:21:36

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,816评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,729评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,300评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,780评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,890评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,084评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,151评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,912评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,355评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,666评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,809评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,504评论 4赞 334
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,150评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,882评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,121评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,628评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,724评论 2赞 351

jQuery学习笔记

推荐阅读更多精彩内容