jQuery official website: https://jquery.com/
Online API: https://api.jquery.com/
jQuery the UI: https://jqueryui.com/
API: provide application developers with a software-based or hardware to access the ability of a set of routines, but without accessing the source code
version of the high jQuery does not support IE browser, note match
1. Introduction framework and jQuery library
jQuery is a JavaScript syntax to write some class of functions, internal calls JS is still achievable, it is not a substitute JS. It can be said jQuery function itself is a pile of JS, jQuery is a JS library
2. jQuery files
(1) Why learn jQuery?
DOM in a simple function requires a lot of code; compatible with many problems; the code fault tolerance is poor; window.onload can only have a
(2) jQuery benefits: resolve browser compatibility issues, small size, chain programming, hidden iterative, rich plug-in, open source, free
(example) click the button to see a small blue square
<script>//Dom中写法
window.onload=function () {
document.getElementById("btn").onclick = function () {
var divObj=document.getElementById("dv");
divObj.style.width="100px";
divObj.style.height="100px";
divObj.style.backgroundColor="blue";
}
}
</script>
<script src="jquery.js"></script>//jQuery写法
<script>
//页面加载后的一个事件
$(function(){
$("#btn").click(function () {
$("#dv").css({"width":"100px","height":"100px","backgroundColor":"blue"});
});
})
</script>
3. jQuery in the top-level object "$"
in BOM (Browser Object Model) was Window, DOM is in the document (Document Object Model)
-
$ () ;: is shorthand for jQuery, js equivalent of window
-
jQuery () ;: different wording, as meaning
-
document: write directly represents the document object, can only point out the properties and methods of dom
-
$ (Document): represents the jQuery object, only the points of properties and methods jq
BOM: "JavaScript checkpoints mind" of the BOM
4. jQuery load event (this function editor Crazy Tucao two dollar signs can not appear at the same time, it will become a label, see the following 'dollar sign' words unconsciously associate symbols )
the window.onload write-once, repeat the kill will be back, all of page tag image, after the introduction of external loads trigger,If it has executed only for the last two
$ (document) .ready after () DOM basic tag to load the trigger, you can write more, and the dollar sign (function) as
◆ loading order effects show
<script src="jquery.js"></script>
<script>
//jQuery代码和DOM中的window.onload事件是相同的
//$(window).load()加载速度最慢
$(window).load(function () {
console.log('111111')
});
//$(document).ready()加载速度更快
$(document).ready(function () {
console.log('222222')
})
$(document).ready(function () {
console.log('333333')
})
$(function () {
console.log('444444')
})
$(function () {
console.log('555555')
})
</script>
Performing structure:
◆ light switch case
<script src="jquery.js"></script>//jQuery写法
<script>
$(function () {
$("#btn").click(function () {
if ($(this).val()=="关灯"){
$("body").css("backgroundColor","black")
$(this).val("开灯")
}else{
$("body").css("backgroundColor","white")
$(this).val("关灯")
}
})
})
</script>
<body>
<input type="button" id="btn" value="关灯">
</body>
.val () method -> acquisition button of the value attribute
.val ( "Content") -> Settings button is the value of the property value
◆◆ Also note here is when you call the front val $ (this)
window.onload=function () {
document.getElementById("btn").onclick=function () {
if(this.value=="关灯"){
document.body.style.backgroundColor="black";
this.value="开灯";
}else {
document.body.style.backgroundColor="white";
this.value="关灯";
}
}
}
Note that this value is determined value ==, when modifying a value =
5. The conversion between the jQuery objects and DOM objects
(. 1) DOM transfected jQuery -> $ (DOM object)
window.onload=function () {
var btnObj=document.getElementById("btn");
$(btnObj).click(function () {
$(this).css("backgroundColor","pink");
});
};
（2）jQuery转DOM
$("#btn")[0]
$("#btn").get(0）
Note that a distinction is [], it is a ()
$(function () {
// $("#btn").οnclick=function () {
// this.style.backgroundColor="red";
// } jQuery对象用dom事件虽然不报错，但是不能运行
$("#btn").get(0).onclick=function () {
this.style.backgroundColor="red";
}
})
$(function () {
var btnObj=document.getElementById("btn");//DOM对象
var obj=$(btnObj).get(0);//jQuery（$(btnObj)）转DOM对象
obj.onclick=function () {
this.style.backgroundColor="green";
}
})
6. jQuery selector in
the selector is to obtain elements, CSS provided by the style element, jQuery acquires the element operated by the selector.
DOM elements get in the way:
document.getElementById();
document.getElementByTagName();//标签的名字
document.getElementByName();//name属性的值
document.getElementByClassName();
Code more long, trouble, JQ can be more simple and convenient, commonly used selectors have an id selector, tag selector, class selector (dollar sign ( "#btn"), the dollar sign ( "div"), the dollar sign ( ".cls") $ ( "*")),Note that all double quotes
text () method sets or returns the text content of the selected element corresponds to the DOM or textContent innerText
$(function () {
$("#btn").click(function () {
$("#dv").text("这的div有颜色")
});
});
$("p").text("我们都是p")//这种方法可以用来统一修改p标签中的内容
Class selector label + $ (li.cls)
<script>//隔行变色
$(function () {
$("#btn").click(function () {
$("li.cls").css("backgroundColor","pink")
})
})
</script>
<body>
<input type="button" id="btn" value="点击">
<ul>
<li class="cls">111</li>
<li>222</li>
<li class="cls">333</li>
<li>444</li>
</ul>
</body>
Interlaced color may also be used,: even even number selector;: odd base selector
$(function () {
$("#btn").click(function () {
$("#uu>li:even").css("backgroundColor","pink")
$("#uu>li:odd").css("backgroundColor","blue")
});
});
Multi-condition selector $ (span, li, div)
level selector
- Descendant selectors (child elements of elements, son, Zai Zai, Sun)
$ ( "# dv li") $ ( "ul li")(This is no middle comma)
$ ( "# Dv *") represents id all the elements for the next dv - Descendant selector (direct all child elements, son)
$ ( "# ul> li")
$ ( "div> span") - Gets the current element adjacent elements $ ( "div + span")
- Gets the current element behind all the elements $ ( "div ~ span")
◆ drop-down box
.show (); // display .hide (); // Hide
<script>
$(function () {
$(".wrap>ul>li").mouseover(function () {
$(this).children("ul").show();//显示
});
$(".wrap>ul>li").mouseout(function () {
$(this).children("ul").hide();//隐藏，想要显示的慢一点，可以加数字延迟
});
});
</script>
<body>
<div class="wrap">
<ul>
<li>111
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>
</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
Index selector 0-1-2-3- ...
: eq (3) obtain the index of the element 3 of
all the elements gt (3) index is greater than 3:
: lt (3) index is less than all of the elements 3
7. Several common methods
-
.html () method, is provided intermediate the label display tags and other content, like innerHTML. As the button is clicked to add a div p tags, parentheses can directly write a string label content, it is to set the contents of the div element
-
.text () method, text middle of the Settings tab display, similar to innerText write content within parentheses, is to set the contents of the text; Nothing is written is to get the text content of this element
-
() Value is the value of the method provided in the input tag .val, similar value
-
.css () method, the style set element, similar to the style, .css () is written in key-value pairs, such as: "width": "300px"
write string () in a parameter, the value to be set, nothing to write, returns the value of this property
◆ the mouse over the color .mouseover () .mouseout ()
<script>
$(function () {
$("#uu>li").mouseover(function () {
$(this).css("backgroundColor","pink")
});
$("#uu>li").mouseout(function () {
$(this).css("backgroundColor","")
});
});
</script>
<ul id="uu">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
