Author | Jeskson
Source | Dada front-end bistro
jqueryInstallation and grammar, jquerya variety of selectors, domoperation and jqueryevents.
jQueryFramework, introduction, advantages, installation, grammar, jQueryselector, idselector, class selector, tag selector, attribute selectors, position selector, descendant selectors, descendant selector, select the object, select the object traversal, page initialization, jQuerythe domoperation, search, delete, create, copy, insert, replace, jQueryevents, event bindings, mouse events, keyboard events, form events, window events, event bubbling, events canceled.
jQueryIt is a good use of the JavaScriptlibrary, write less, do more.
Where Will the benefits of jQuery in?
Its advantage is that it is lightweight, lightweight what is it? That it is very request, about the size of 30kb; with a strong selection and dompackaging operations, reliable event handling mechanism, a sound ajax, jqueryall ajaxpackaging operations to function ` $.ajax()in; has a wealth of plug-ins, well documented, open-source products.
jqueryInstallation, download jquery jquery library, the second is to download from the cdn.
jqueryofficial website
http://jquery.com
First to enter the download jquerydownload page, download the latest jquerylibrary files, there are two versions: the production version, Production versionfor the actual site, Development versionthe development version for testing and development.
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script type="text/JavaScript" src="./js/jquery-xx.js">
</script>
</head><script type="text/JavaScript">
$(document).ready(function(){
// 等待dom元素加载完毕
alert("成功引入");
});
</script>cdnIn the configuration Jquery, if you do not download jquery, you can use cdnreferences.
jquerygrammar:
jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()
// 入口
$(document).ready(function(){
// 执行代码
});
$(function(){
// 执行代码
});
JavaScript的入口函数
// 入口函数如下
window.onload = function(){
// 执行代码
}JavaScriptEntry function and jqueryentry functions:
jqueryThe entry function is HTMLexecuted after all the labels are loaded; JavaScriptthe window.onloadevent is and all content (including image files, etc.) was executed after finished loading.
jquerySelector
JavaScriptSelector:
document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()Selector $ ( "."),
As a function, a function for the plant, $ as a function name.
id selector
$("#id")
Id matches the given element a
Class selector
$(".class")
Matching elements according to a given class
Tag Selector
$("element")
Matches all elements of the given element name
Attribute selectors
$("element[attribute]")
Matching elements comprising a given attribute
$("div[title=test]")
Location selector
$(element:position)
Matching elements corresponding to the position in line with Tags
$("div:first")
All matches in the first div element div
Descendant selectors
$("ancestor descendant")
Matching the given ancestor of all descendant elements
$("#ul li")
All li elements that match the id is null
Descendant selector
$("parent>child")
Matching all specified "parent" element specifies the "child" of direct child elements
$("#标签id值")
// 原生
var div = document.getElementById('test');
div.style.border = '3px solid blue';
// jquery
$("#test1").css("border", "3px solid red");
$(".class属性值")
$(".cls1").css(...);
$("标记名称");
// 找到所有P标签
$("p")
属性选择器
$("[属性名"])
匹配所有具有指定属性的元素
$("[属性名='值']")
匹配与值相等的元素
$("[属性名!='值']")
匹配与值不相等的元素
$("[属性名^='值']")
匹配以值开头的元素
$("[属性名$='值']")
匹配以值结尾的元素
$("[属性名*='值']")
匹配包含值的元素Location Selector:
$("selector:first")
Match the first element
$("selector:last")
Match the last element
$("selector:odd")
Odd element matching index value, starting from zero count
$("selector:even")
Matching index value is an even element, starting from zero count
$("selector.eq(n)")
N is the index set of matching elements
$("selector.gt(n)")
Matching the set of index values greater than n elements
$("selector:lt(n)")
Matching the set of index values of elements less than n
$("选择器1 选择器2...")$("#test li").css("border", "2px solid red");Descendant selector
$("选择器1>选择器2>...")Select object:
$("选择器").each(function(index){this})
选择器对象的遍历
$("选择器").find()
找前面选择器匹配到的元素的子元素
$("选择器").not()
在前面选择器匹配到的元素中去除某个或者某几个
$("选择器").add()
在前面选择器中再追加节点Select the object traversal
<body>
<ul id="test">
<li>d</li>
<li>a</li>
</ul>
</body>
<script type="text/JavaScript">
$("#test li").each(function(index){
this.title="我是第"+(index+1)+"个";
});
</script>Page initialization
<script type="text/JavaScript">
$(function(){
//一定会在页面加载完成后运行
})
</script>The jqueryfunction code into this function can wait until the end of the page is loaded and run.
JqueryIn domoperation.
domIt is document object modelan abbreviation. Document Object Model. domIs a browser, platform, language-independent interface, jquerythe domoperation is on HTMLthe elements in the operation.
<script type="text/JavaScript">
$(document).ready(function(){
// 测试
$("#btn1").click(function(){
alert("文本内容："+$("#test0").text());
});
});
</script>
<p id="test0">da</p>
<button id="btn1">da</button>attr()Gets the value of its various properties
$(document).ready(function(){
$("button").click(function(){
alert($("p").attr("title"));
});
});Creating HTMLelements:
$(document).ready(function(){
var $li1 = $("<li>d</li>");
var $li2 = $("<li>a</li>");
$("button").click(function(){
$("ul").append($li1);
$("ul").append($li2);
});
});Insert HTMLelements
append()
Additional content to match the interior of each element
appendTo()
The all matching elements added to another collection of elements specified in
Note: $(A).append(B)The operation is not added to the A to B, but is appended to the B, A
prepend()
The contents of each element of the internal head matches
prependTo()
The all matching elements to the set of pre-specified elements of another.
Note: $(A).prepend(B)The operation, not the B to A in front, but the A to B in the preamble
after()
Insert after each matched elements
insertAfter()
The later all matching elements inserted into the other elements of the set designated
note: $(A).after(B)the operation, not the B inserted after A, A instead of B is inserted into the rear
before()
Inserts before each matching element
insertBefore()
The matching elements inserted in front of all the other elements of the set specified.
Note: $(A).before(B)The operation is not inserted in front of the B-A, A is inserted into the front of B instead
Delete HTML elements
Delete HTML elements commonly used jqueryin remove()andempty()
remove()The role is from domdelete selected elements and sub-elements, that is, if an element is deleted, its descendant elements are also deleted.
empty()The role is not to delete HTMLelements but empty HTMLelements, you can empty check HTMLall descendant elements HTMLelement.
Copy HTML elements
clone()The effect is to copy the HTML element.
$(document).ready(function() {
$("button").click(function() {
$("body").append($("p").clone());
});
});
});Replace HTMLelement
There are two ways: replaceWith()and replaceAll()the two methods
repalceWith()
Will replace all matching elements designated HTML element or elements dom
repalceAll(selector)
Alternatively all selector elements matched by matching element
replaceWith()And replaceAll()the effect is the same, just different uses.
A replacement element B elements:
replaceWith()Wording
A.replaceWith("B")
B.replaceAll("A")
$(document).ready(function(){
$("button").click(function(){
$("ul li:eq(0)").replaceWith("<li>da</li>")
});
});event
Mouse events:
click，mouseover，hover
Keyboard events:
keypress，keydown，keyup
Form events:
submit，change，focus
Window events:
scroll，resize
Event binding
Event binding syntax bind () method:
bind(type,[data],fn)click(),blur(),focus(),
mouseover(),mouseout(),
mousedown(),mouseup()
mouseenter(),mouseleave(),
resize(),scroll(),
keydown(),keyup(),keypress()typeParameter is a string containing one or more event types, dataparameters are added as event.dataan extra data object property value passed to the event object, fnthe parameter is bound to each element of the matching event handler above.
$(document).ready(function(){
$("input").bind("focus",function(){
$("span").show();
});
});Shorthand for binding event
$(document).ready(function(){
$("input").focus(function(){
$("span").show();
});
});Mouse events click(),dblclick(), double-click occurs twice in a short time clickis to double-click event.
mouseenter()When the mouse pointer through the elements occur mouseenterevent mouseleave()when the mouse pointer leaves the element occurs mouseleaveevent. hover()Used to simulate the cursor over the event.
$(document).ready(function(){
$("#p1").hover{
function(){
$("#p1").css('background','green');
},
function(){
$('#p1").css("background","pink");
}
}
});keydown()When the keyboard or button is pressed, the occurrence of keydownan event, keyupoccur when the keyboard is released keyupevents. keypress()When the keyboard or a button is pressed, the occurrence of keypressan event.
Form events
When the form is submitted, it will happen submitevent. change()When the value of the element changes will occur changeevent, focus()when the element gets the focus, the trigger focusevent. blur()Fires when the element loses focus.
Window events:
scroll()When the user scrolls the specified element triggers the scrollevent. scrollEvent applies to all scrollable elements and windowobjects. resize()When adjusting the size of the browser window, it will trigger the resizeevent.
x=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x+=1);
});
});Event bubbling, the event will follow the domhierarchy like blisters as ever upward until the top
Stop bubbling and default behavior:
stopPrapagation()andpreventDefault()
event.preventDefault();
// 阻止默认行为event.stopPropagation();
// 停止事件冒泡Event lift:
unbind(type, [data])
typeFor the type of event
datathat will be released function
❤️ Do not forget to leave your footprints learning [+ collection point Like Comments +]
Author Info:
[Author]: Jeskson
[original] Public number: Dada front-end bistro.
[Welfare]: No public reply "Information" self-study materials sent to spree (into the group to share what you want to say Ha, I did not see)!
[Reserved] Description: reproduced please indicate the source, thank you! ~
Large front-end development, front-end development positioning technology stack blog, PHP background knowledge, web full stack technology fields, data structures and algorithms, and so easy to understand network theory is presented to the junior partner. Thank you support, courtesy of love! ! !
If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.
Please thumbs up! Because you agree / encouragement is the greatest power of my writing!
Welcome attention to Dada 's CSDN!
This is a quality, attitude blog
