Before using, you first create a regular expression object, and there are two ways to create an object:/pattern/attributes: This is a simple, recommended use. And you don't have to write quotesnew RegExp(pattern, attributes);: As with the above effect, here is the value passed in by the parameter, so you must write the quotation marks. Also pay attention to the escape character.
The parameter pattern is a string, which is the regular expression.
The parameter attributes is an optional string that contains the property "G" (Global Match), "I" (case insensitive), and "M" (multiline matching pattern).
Create a regular expression object with the above 2 method, ignoring the optional attributes parameter, and the two methods create exactly the same result:
> reg1 = /^\d$/;< [regex] /^\d$/: > reg2 = new RegExp("^\\d$");
Then we use regular expression objects to match our strings, and here are 2 ways to learn:RegExpObject.test(string): Retrieves whether a string matches, returns a Boolean value (True or FALSE)RegExpObject.exec(string): Gets the matching result, and returns null if the match is not reached. Returns an array that can be matched again for the returned results. This method is more complex, followed by a step-by-step expansion.
> reg1 = /^\d+$/; // 匹配纯数字字符串< [regex] /^\d+$/: > reg1.test(‘123‘)< true> reg1.test(‘1a23‘)< false> reg2 = /\bJava\w*\b/; // 匹配以Java开头的单词< [regex] /\bJava\w*\b/: > text = "JavaScript is more fun than Java or JavaBeans!"< "JavaScript is more fun than Java or JavaBeans!"> reg2.exec(text); // 只匹配到了第一个，而且返回的是数组< [object Array]: ["JavaScript"]
If you use () to group expressions in regular expressions, the returned array will have a 2nd element. Following the example above:
> reg3 = /\b(Ja(va))(\w*)\b/; // 匹配以Java开头的单词，这里用括号加了3个分组< [regex] /\b(Ja(va))(\w*)\b/: > reg3.exec(text);< [object Array]: ["JavaScript", "Java", "va", "Script"]
If you want to match all, then you need to add the attributes parameter G, but return only one result at a time. Executes again, and the next result is returned. The match is finished. Returns NULL. You can then continue to execute again and start from the beginning. Or just the example above:
Prevent events from occurring 2> reg4 = /\bJava\w*\b/g; // 匹配以Java开头的单词，最后加了g全局匹配< [regex] /\bJava\w*\b/g: > reg4.exec(text)< [object Array]: ["JavaScript"]> reg4.exec(text)< [object Array]: ["Java"]> reg4.exec(text)< [object Array]: ["JavaBeans"]> reg4.exec(text)< null> reg4.exec(text)< [object Array]: ["JavaScript"]
Custom events are performed first
In the last lesson, the a tag has an event, we can bind a custom event again, and the custom event is executed first. Then, if the event returns false, the operation is interrupted (blocking subsequent events). Submit is the same as submitting the form, and you can also prevent the form from being submitted by return false. In most cases, this type of custom event is performed first.
Default events are performed first
This is relatively rare, such as a check box (checkbox), to test:
<body><label id="l1" for="i1">测试复选框</label><input id="i1" type="checkbox"><script> document.getElementById(‘l1‘).onclick = function () { alert("我是label") }; document.getElementById(‘i1‘).onclick = function () { alert("我是input"); };</script></body>
Before the A-label test, the first pop-up alert, click Off before the page jumps. And here is the popup alert when the check box in the page has changed. So the default event is executed first. By the way, the label is also the general case, the custom event is performed first.
Form validationCombine the above regular expression to determine the validation. Then combined with the above blocking event occurs, when the validation does not pass, the interrupt operation.
why form validation? you can reduce the requests that the server receives. A subset of non-compliant requests are intercepted through authentication on the client. However, the server can not rely entirely on client authentication, because the client may disable JS, or modify the client, or even directly through other means to send the request to the server side, the service side must have a complete set of validation. This is the first to learn the client through the JS implementation of the validation.
The teacher's approach: looping through custom attributes to determine which tags need to be validated. or by customizing the properties to determine what the label specifically validates. It's not a way to write dead. Like what
require = true: Determine if this tag needs to be verified
field = ' string ': This tag needs to be populated with a string
Mobile = Tue: This tag needs to verify whether it is a phone number
Min-len = 6: The minimum length of the content in this tag is 6
name = ' pwd ' confirm-to = ' pwd ': The previous one is the attribute in the registration password tag. The next one is to confirm the custom attribute in the password tag, to find the name attribute value and its same label to verify that the content is consistent.
The validation trigger is written in the onclick event of the submit tag. If the validation fails, returns false to prevent the form from being submitted.
You can also do more advanced, adding a lost focus event (onblur) for each label that needs to be validated (require = true), triggering the validation of the current label. You only need to display the prompt for validation errors here.
Remember the idea, there is no example.
Define different styles for different media types. Put your CSS style together with the selector, and then wrap a layer of @media outside and write the conditions. For example, change the background color when the width changes:
application Scenarios , such as the top of the menu word row, when the width of the page is smaller resulting in insufficient width, we can of course choose to set a minimum width, so that the bottom of the scroll bar. Alternatively, you can make this part of the style a different one by using a responsive layout. For example, the original is a word lined menu, now all receive a drop-down list, click on the vertical to expand. Not just a change in CSS style seems to be possible. In fact, both menus are written, and only one of them is displayed. Setting another display value of none can be hidden.
Style Priority 2CSS style priority, has been learned, is generally after the loading of the effective. You can also add!important after the style to ensure that the style must take effect:
The following is to say plug-ins, in the use of other people's components, it is possible to use. Because you may not be able to guarantee that your style must be written in the end, such as your plugin in JS modified the style. This is the way to force your style to take effect and cannot be changed.
This effect is very strong, so can not be used indiscriminately. Important should only be allowed to overwrite the JS added style, such as those that you cannot control the JS component plus the style, and use must limit the CSS range.
Front End Components Introduction EasyuiGo to the demo to find the style you need, directly copy its source code can be used. A scene with a style that focuses on background management.
However, the page referenced CSS and JS file connection also need to change. Go to the download to download the Easyui and store it locally. The address in the page is then modified to address the cost of the file.
Advantages : Fully functional.
Disadvantage : The study cost is big, is not easy to revise. Because, the JS code may modify the HTML tag, that is, you write HTML and your page will eventually display the HTML is not quite the same, was JS modified. Also, there are many AJAX operations, this has not been learned, and so on after learning Ajax to consider using this.
JQuery UIIt is similar to the Easyui above. First download down, fancy the style of your own to find the source copy down to use. Styles are also a scenario that focuses on background management.
advantages : No advantages, all aspects of the Easyui and the same. Relatively simple, the current level can still grasp, this can be used first.
disadvantage : The function does not have the above Easyui complete. And just JS rich some, basically no CSS, do very simple.
BootStrapThe above 2 basic is for the background management of the scene, this component for the other scene style also has support (probably all the scene), such as your Web master. In addition, there is a lot of responsive layout here, including its own page also, know.
Pros : More application scenarios.
cons : Not said. Anyway, use it now.
Using templatesAll of the components are provided, and we have to combine them. Then try the template.
Templates can be found online free of charge, of course, good templates are also available.
The nifty-v2.2.2 template was demonstrated in class. Go to the template folder to find the sample you need, is a complete page. First, based on a template to draw the page, and then according to the actual needs to change to their own needs.
Example-Carousel diagram (Bxslider)Here we introduce a component: Bxslider. Official website: https://bxslider.com/
Download the plugin first and store it locally.
Then introduced his CSS file and JS file in HTML, as well as jquery. Note that jquery should be introduced before the JS file .
Then copy its script code, and then copy the code in its body.
Just fill in your picture:
<! DOCTYPE html>
The above is just the default effect, you can also set the parameters, only need to modify the script, in addition to the parameters:
<script> $(document).ready(function(){ $(‘.slider‘).bxSlider({ mode: ‘fade‘, // 切换模式设为淡出 auto: true, // 自动切换 pause: 2000 // 自动切换间隔（ms） }); }); </script>
More parameter settings to go online check it.
Python Automation Development Learning 18-web Front-end supplemental content
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
