Author | Jeskson
Source | Dada front-end bistro
jquery
Installation and grammar, jquery
a variety of selectors, dom
operation and jquery
events.
jQuery
Framework, introduction, advantages, installation, grammar, jQuery
selector, id
selector, class selector, tag selector, attribute selectors, position selector, descendant selectors, descendant selector, select the object, select the object traversal, page initialization, jQuery
the dom
operation, search, delete, create, copy, insert, replace, jQuery
events, event bindings, mouse events, keyboard events, form events, window events, event bubbling, events canceled.
jQuery
It is a good use of the JavaScript
library, 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 dom
packaging operations, reliable event handling mechanism, a sound ajax
, jquery
all ajax
packaging operations to function ` $.ajax()
in; has a wealth of plug-ins, well documented, open-source products.
jquery
Installation, download jquery jquery library, the second is to download from the cdn.
jquery
official website
http://jquery.com
First to enter the download jquery
download page, download the latest jquery
library files, there are two versions: the production version, Production version
for the actual site, Development version
the 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>
cdn
In the configuration Jquery
, if you do not download jquery
, you can use cdn
references.
jquery
grammar:
jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()
// 入口
$(document).ready(function(){
// 执行代码
});
$(function(){
// 执行代码
});
JavaScript的入口函数
// 入口函数如下
window.onload = function(){
// 执行代码
}
JavaScript
Entry function and jquery
entry functions:
jquery
The entry function is HTML
executed after all the labels are loaded; JavaScript
the window.onload
event is and all content (including image files, etc.) was executed after finished loading.
jquery
Selector
JavaScript
Selector:
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 jquery
function code into this function can wait until the end of the page is loaded and run.
Jquery
In dom
operation.
dom
It is document object model
an abbreviation. Document Object Model. dom
Is a browser, platform, language-independent interface, jquery
the dom
operation is on HTML
the 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 HTML
elements:
$(document).ready(function(){
var $li1 = $("<li>d</li>");
var $li2 = $("<li>a</li>");
$("button").click(function(){
$("ul").append($li1);
$("ul").append($li2);
});
});
Insert HTML
elements
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 jquery
in remove()
andempty()
remove()
The role is from dom
delete 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 HTML
elements but empty HTML
elements, you can empty check HTML
all descendant elements HTML
element.
Copy HTML elements
clone()
The effect is to copy the HTML element.
$(document).ready(function() {
$("button").click(function() {
$("body").append($("p").clone());
});
});
});
Replace HTML
element
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()
type
Parameter is a string containing one or more event types, data
parameters are added as event.data
an extra data object property value passed to the event object, fn
the 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 click
is to double-click event.
mouseenter()
When the mouse pointer through the elements occur mouseenter
event mouseleave()
when the mouse pointer leaves the element occurs mouseleave
event. 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 keydown
an event, keyup
occur when the keyboard is released keyup
events. keypress()
When the keyboard or a button is pressed, the occurrence of keypress
an event.
Form events
When the form is submitted, it will happen submit
event. change()
When the value of the element changes will occur change
event, focus()
when the element gets the focus, the trigger focus
event. blur()
Fires when the element loses focus.
Window events:
scroll()
When the user scrolls the specified element triggers the scroll
event. scroll
Event applies to all scrollable elements and window
objects. resize()
When adjusting the size of the browser window, it will trigger the resize
event.
x=0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x+=1);
});
});
Event bubbling, the event will follow the dom
hierarchy like blisters as ever upward until the top
Stop bubbling and default behavior:
stopPrapagation()
andpreventDefault()
event.preventDefault();
// 阻止默认行为
event.stopPropagation();
// 停止事件冒泡
Event lift:
unbind(type, [data])
type
For the type of event
data
that 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