JQuery学習の核心
13668 ワード
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8" />
<title>JQtitle>
<script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8">script>
<style type="text/css">
#bar{
margin:3px;
width:40px;
height:40px;
position:absolute;
left:0px;
top:30px;
background:green;
display:none;
}
#bar.newcolor{
background: blue;
}
style>
head>
<body>
<div class="wrap">
<div class="div1 con">
<div class="div11">ssdiv>
div>
<div class="div2 con">
<div class="div21">sssdiv>
div>
div>
<ul>
<li id="foo">fooli>
<li id="bar">barli>
ul>
<button id="stop">stopbutton>
body>
<script>
//1.JQ ， ， ， HTML ，
console.log($(".div11",".div1"));
//2.JQ ， ， ， ， ， 。 ： $("") $("") ， type ， type
$(" ",{
text: "Click me!",
id:'move',
click:function(){
$(this).css("background","blue")
}
}).appendTo($(".wrap"));
//3. DOM
/*
* js onload jq ready ：
* 1.window.onload 。
$(document).ready() DOM ， 。
2.window.onload ， window.onload ，
$(document).ready() ，
JQuery ready IE readystatechange DOM DOMContentLoaded ， DOM 。
* */
// $(document).ready(function(){})
$(function(){
console.log(22)
})
//4.each for, ， i i
$(".con").each(function(i){
console.log(i)
$(this).toggleClass("ex")
})
//5.size() , length ， undefined is not a function
// console.log("Size: " + $("li").size());
//6.
console.log("length: " + $("li").length);
//7. $() ，
// console.log($('ul li').selector)//ul li
//8. $() ，
// console.log($('ul li',document.body).context)
//9. 0 ， DOM , eq(0) ， eq() Jq
console.log($(".con").get(0))
//10.index() ， 0
console.log($('li').index($("#foo")))// dom JQ ，
console.log($('#bar').index("li"))// ， #bar li
console.log($('li').index($('li:gt(0)'))); // jQuery ，
console.log($('#bar').index())// ，
console.log($('baz').index())// ， -1
//11.data() ，
$('#bar').data('test',{'first':'sss','second':'eee','third':'www'})
console.log($('#bar').data('test').third)
$('#bar').removeData('test')//
console.log($('#bar').data('test'))
//12. ， ， 。
/* ， fx, fx ， ， ，
*/
/*queue(name,[callback]):
, ( , fx);$('#demo').queue('name')
, .$('#demo').queue('name',fun); queue fun name
, ( ).
*/
$('#move').click(function () {
$("#bar").show("slow");
$("#bar").animate({left:'+=200'},2000);
//queue()
$("#bar").queue(function () {
$(this).addClass("newcolor");
//shift() ， 。 ，
$(this).dequeue();
});
$("#bar").animate({left:'-=200'},500);
$("#bar").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("#bar").slideUp();
});
//clearQueue([queueName])
$("#stop").click(function(){
$("#bar").clearQueue();
});
// http://www.cnblogs.com/rmbteam/archive/2011/07/25/2116357.html
//13.jQuery.fn.extend(object) jQuery （ ） jQuery.fn = jQuery.prototype jQuery.prototype ， jQuery “ ”，
/*
* jQuery.extend(object) jQuery 。
* ：http://www.cnblogs.com/xuxiuyu/p/5989743.html
*/
script>
html>