Java Web Learning Notes 2
javascript regular expression
regfxp object
Mode 1:
var putt=new RegExp("e");//Indicates that the required string must contain the string e
var str="abcde";
alert(putt.test(str));
Mode 2:
var putt=/e/;
var str ="abcde";
alert(putt.test(str));
var putt=/{abc}/;//Indicates that the string is required to contain any character in the corresponding bracket
var putt=/{a-z}/;//Indicates whether the required string contains lowercase letters. The same is true for uppercase letters
var putt=/{0-9}/;//Indicates whether a number is included
var putt =/\w/;//\w indicates whether it contains uppercase and lowercase numbers and underscores
var putt=/a+/;//Indicates whether the string contains an a
var putt=/a*/;//Indicates whether the string contains at least 0 or one a
var putt=/a？/;//Indicates whether the string contains 0 or 1 a
var putt=/a{3}/;//Indicates whether the string contains three consecutive a's
var putt=/a{3,5}/;//Indicates that the string contains 3-5 a's
var putt=/a{3,}/;//Indicates that the string contains at least 3 a's
var putt=/a$/;//Indicates that the string ends with a
var putt =/a^/;//Indicates that it must start with a
var putt =/^a{3,5}$/;//Indicates whether the string is checked from beginning to end, including 3-5 a
JavaScript verification
function onclickfun(){
var usernameobj=document.getElementById("username");
var usernametest=usernameobj.value;
var putt=/^\w{5,12}$/;
var spanobj=document.getElementById("span01");
if (putt.test(usernametest)){
spanobj.innerHTML="The user name is legal";
}else {
spanobj.innerHTML="Illegal user name";
}
}
</script>
</head>
<body>
user name:<input type="text" id="username" value="enter one user name">
<span style="color: darkred;"id="span01"></span>
<button onclick="onclickfun()">check</button>
</body>
</html>
getelementsbyname method
function checkallfun(){
var elementsByName = document.getElementsByName("hobby");//Returns a collection of multiple label objects according to the specified name
//Leave all check boxes unchecked
for (var i = 0; i < elementsByName.length; i++) {
if (!elementsByName[i].checked){
elementsByName[i].checked=true;
}
}
}
function checknofun(){
var no = document.getElementsByName("hobby");//Returns a collection of multiple label objects according to the specified name
for (var i = 0; i < no.length; i++) {
no[i].checked=false;
}
}
function chackreverfun(){
var elementsByName = document.getElementsByName("hobby");//Returns a collection of multiple label objects according to the specified name
for (var i = 0; i <elementsByName.length ; i++) {
if (elementsByName[i].checked){
elementsByName[i].checked=false;
} else {
elementsByName[i].checked=true;
}
}
}
</script>
</head>
<body>
<!-- user name:<input type="text" id="username" value="enter one user name">-->
<!-- <span style="color: darkred;"id="span01"></span>-->
<!-- <button onclick="onclickfun()">check</button>-->
hobby:
<input type="checkbox" name="hobby" value="cpp" checked="checked">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="js">javascrip
<br/>
<button onclick="checkallfun()">Select all</button>
<button onclick="checknofun()">None</button>
<button onclick="chackreverfun()">Reverse selection</button>
</body>
</html>
getelementsbytagname method
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickfun(){
var input01 = document.getElementsByTagName("input");
for (var i = 0; i < input01.length; i++) {
input01[i].checked=true;
}
}
</script>
</head>
<body>
hobby:
<input type="checkbox" value="cpp" >c++
<input type="checkbox" value="java" >java
<input type="checkbox" value="js" >javascrip
<br/>
<button onclick="onclickfun()">Select all</button>
</body>
</html>
ID > name > tagName is preferred
Add a child node
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload=function (){
var htmlDivElement = document.createElement("div");
htmlDivElement.innerHTML="qqqq";
document.body.appendChild(htmlDivElement);
}
</script>
</head>
<body>
</body>
</html>
jquery
Combination of javascript and query js class library
helloWord for JQuery
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js">
</script>
<script type="text/javascript">
// window.onload=function (){
// var butobj = document.getElementById("butid");
// butobj.onclick=function (){
// alert("helloword")
// }
//
// }
$(function (){
var $btuobj = $("#butid");
$btuobj.click(function (){
alert("jquery Click event for");
})
});
</script>
</head>
<body>
<button id="butid" onclick="onclickfun()">sayhello</button>
</body>
</html>
Core functions of Jquery
$()
Incoming parameters:
1. After the function page is loaded, it is equivalent to window ο nl ο Same as ad=function()
2. If you pass in an html string, an html tag object will be created
$(html string) appendTo (parent node) / / quickly add labels and contents
3. Selector string
$("#id attribute value") = ID selector
$("tag name") = tag name selector
$(". Class attribute value") = class selector
$(#id, tag name,. class attribute value) = represents the intersection of the above three
4. The dom object will be transformed into a jquery object
The jquery object is the array of dom objects + the method of jquery
Conversion of jquery object and dom object
$(dom object)
jquery [subscript]
jquery selector
Basic selector
$("#id attribute value") = ID selector
$("tag name") = tag name selector
$(". Class attribute value") = class selector
$(#id, tag name,. class attribute value) = represents the intersection of the above three
Level selector
$(tag name tag signature) = select all the second tags in the first tag
$(tag name > tag name) = select tag 2 in the child element in tag 1
$(tag name + tag name) = select the next tag 2 of tag 1
$(tag name ~ tag name) = all tags 2 after selecting tag 1
Filter selector
Basic filter selector
$(tag name: frist) = match first element
$(tag name: last) = match last element
$(tag name not: (: selector)) = match unselected Tags
$(tag name: even) = even index (odd rows)
$(tag name: odd) = index is odd (even rows)
$(tag name eq (number)) = indicates the line
$(tag name gt: (number)) = index greater than this number
$(tag name lt: (number)) = index is less than this number
$(tag name: header) = match title tag
$(tag name: animated) = the tag that is executing the animation
Content filter
$(tag name: contains (text)) = matches the text
$(tag name: empty) = all empty elements
$(tag name: parent) = matching non empty Tags
$(tag name: has(selector)) = matches the contents of all elements matched by the selector lock
Attribute filter
$(Tag name[attribute])=Filter tags containing this attribute
$(label[attribute=value])=The filter attribute value is vlaue Label for
$(label[attribute^=value])=The filter attribute value is vlaue Label at the beginning
$(label[attribute $=value])=The filter attribute value is vlaue End label
$(label[attribute*=value])=Filter attribute value contains vlaue Label for
$("label[Condition 1][Condition 2]")=Filter attribute value contains vlaue Label for
Form filter selector
$(tag name: type name) = represents all the contents of this type of the tag
input，button，submit，text，password，checkbox，image. . .
$(tag name: enabled) = matches all available elements
$(tag name: disabled) = matches all unavailable elements
$(tag name: checked) = match all selected elements
$(select option = "selected") = match all selected elements
Element filtering
. EQ (number) = get the number of elements
. frist() = get the first element
. last() = get last element
. filter (exp) = gets the set of specified elements
. is (exp) = determines whether true or false is returned for the specified condition
. has(exp) = returns the contents of all elements that match the selector
. not (exp) = delete elements that match the selector
. children (exp) = returns the child element that matches the given selector
. find (exp) = returns a descendant element that matches a given selector
next(exp) = returns the next sibling element of a given selector
nextall (exp) = returns all sibling elements of a given selector
nextuntil (exp) = returns all elements after the given selector matches the specified position
Parent (exp) = return parent element
prev (exp) = returns the previous sibling element of the current element
prevall (exp) = returns all previous sibling elements of the current element
prevuntil (exp) = returns all elements that match the current selector at the specified position
Sildings (exp) = returns all sibling elements
Add() = add selector to current jqurey object
jqurey property action
html () = set and get the contents in the start and end tags
Text () = set and get text in start and end labels
val() = set and get the value of the form item
The parameters that are not passed in are obtained, and the parameters that are passed in are set
attr() = values of and attributes can be set
prop() = you can set values of and attributes. / / solve undefined values
Get one value and set two values
Addition, deletion and modification of dom
appendTo () inserts all the child elements of the tag to become the last child element
prependTo() is inserted in front of all child elements of the label to become the first child element
insertafter () is inserted after the tag as the next element
insertbefore () is inserted after the tag to become the previous element
Replace with() replaces the tag
Replace() replaces all of the tags
remove() deletes the change label
empty() deletes the contents of the tag and retains the tag
css style operations in jquery
addclass() add style
remove() deletes the style
toggleclass() deletes styles if any, and adds styles if none
offest() gets and sets the coordinates of the element
Animation operation of jquery
show() will hide the display
hode() hides the visible
toggle () is hidden when it is visible, but not visible
fadein() fade in
Fadeout() fadeout
fadeto
Fadetoggle() fadetoggle
You can add parameters. The first is the event executed by the animation, and the second is the return function and operation label
jquery event action
$(function() {}) and windows ο nl ο Difference between ad=function() {}
The jqurey page is executed first after loading, and the native page is executed later
1. After jqurey's page is loaded, the browser's kernel parses the page label and creates the dom object. The native page needs to be executed after the label content is loaded
Click() binding click event
mouseover() mouse in event
mouseout() mouse out event
bind() can bind one or more events to an element
one () uses the same as bind, but can only respond once
unbind() contact binding
live () binds events. You can bind all events matched by the selector, including dynamically created events
Event object
function (event) can get the event object