I’ve learned “Intro to jQuery” in Udacity. Here is the link: Intro to jQuery.
What I’ve learned
-
jQuery is a function as well as an object. It’s a JavaScript library.
-
$ === jQuery.
-
$(string)or$(function)or$(DOM Element) - 3 ways to load jQuery:
- local file;
// <script src="js/jquery.js"></script> - jQuery official;
// <script src="http://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> -
Content Delivery Network(CDN), such as Google, Microsoft and so on. Or some Chinese friendly:
// <script src="//cdn.bootcss.com/jquery/3.0.0/core.js"></script> -
jQuery Selector:
$('tag')$('.class')$('#ID') -
$('#shisaq').parent()// chose the element who is the first level of #shisaq’s parent. 选择它上一级的元素$('#shisaq').parents()// chose all the elements who is the parent of #shisaq. We can specify a parent that we want, to add it into the parenthesis. 选择它的所有父级。可在括号中指定具体父级元素$('#shisaq').children()// chose it’s closest children. 选择它的直接下一级$('#shisaq').find()// chose all the children of #shisaq, or, if there is a specify element inside the parenthesis, we chose that one. 选择所有子元素。可在括号中指定具体子元素$('#shisaq').siblings()// chose brothers and sisters. 选择平级元素 .addClass():-
add a class name into a tag or a property. 括号里是假如的class名称。 e.g:
$('body').addClass('blue'); // <body class="blue"></body>2. We can add a function inside the parenthesis. But the function must return a string so that the string can be added as a class. 我们可以在括号里加入一个function。此function必须返回一个字符串，以便此字符串可以作为一个class名称加入 - .toggleClass() :
Switch class. Cut the class if there exists; Add it if there is no. 切换class。如果有，就去掉；如果没有就加上。
e.g:
$('blue').toggleClass();We can also add parameters into the second parenthesis: $('#shisaq').toggleClass(className, addOrRemove);is equal to:if (addOrRemove) {` $(‘#shisaq’).addClass(className);-
Add function:
$('#shisaq').toggleClass(function() {` if ( $(this).parent().is(“nav”) {// This will make a judgement on whether#shisaq's parent isnav. If it is, add class "happy" to#shisaq`; If not, add “sad”. 判断shisaq的父元素是否是nav。如果是，加上happy给shisaq；如果不是，加sad给shisaq。 .next(): Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector. 获取下一个平级（兄弟）元素。如果括号中有提供一个元素，则选中下一个可以匹配此内容的元素。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
If we begin at the third item, we can find the element which comes just after it:
$( "li.third-item" ).next().css( "background-color", "red" );
-
.attr(): Get the value of the selected element, or change the value into other.$('.shisaq').attr('href');// get the value of href in .shisaq 返回在shisaq中href的值$('.shisaq').attr('href', 'yeah');// change the value of href into “yeah” 把shisaq的href的值改为“yeah” -
.css(): Similar with.attr(), but it adds values intostyle. 和attr()类似，不过它是向style里添加内容 -
.html()and.text():.html()returns the whole html, yet.text()returns the content inside the html..html()返回选中元素的整个html，.text()返回选中元素的html里的内容 -
.val(): get the value of the selected element 取选中元素的值 -
[.remove()](http://api.jquery.com/remove/): Remove the selected element from the DOM. e.g:$('nav').remove();// remove the nav 移除nav$('nav').remove('li');// remove all the li in the nav. 移除所有在nav里面的li -
.append()and.prepend():.append()(.prepend()) inserts content to the end(beginning) of the selected element 在选中元素的末尾（prepend是开头）加入括号中的内容 -
.insertAfter()and.insertBefore():$( "<p>Test</p>" ).insertAfter( ".inner" );// insert<p>Test</p>after every.innerclass. 在每一个inner后面加入<p>Test</p>代码段 -
.click() : A function will execute after clicked the selected element. 括号中的function会在被选中的元素被鼠标点击时执行。 e.g:
$("#target").click(function() {
` alert(“Hello world!”);`
}); // after clicked the #target element, the alert window will show.
// 点击#target元素后，alert窗口会弹出
