Tag : Jquery

HTML5 Using FileReader to Preview Front-end Pictures How to get all checkbox in the page? (No Third Party Framework) JavaScript Template Engine Instances Javascript Implement JS function overload JS Cross Browser Binding Event Function JS monomer mode Object method defined using prototype property Closure Implements Result Caching Closures Implement Encapsulation Closures Implement Classes and Inheritance ..

Read more

JQuery learning notes Most of jQuery’s functions need to work according to the DOM model of the document. First, it needs to correctly parse the DOM model structure of the entire document. Using jQuery requires the entire document to be fully loaded by the browser before it can be started. $(document).ready(function () { alert(“Hello World!”); ..

Read more

Links:JQuery selector Basic selector Basics *Select all elements .classchooseclassFor example:$(‘.mybox’) elementchooseelementFor example:$(‘p’) #idchooseidFor example:$(‘#box’) selector1,selectorNYou can select multiple elements at the same time, such as:$(‘div, p.box, #phone’) Hierarchy selector parent > childSelect the specified child element under the specified element, such as:$(‘ul.tonav > li’) ancestor descendantSelect all descendant elements in an element, such as:$(‘form input’) ..

Read more

Original link:Front-end plug-in librarySites:Front-end development documentBlog:Front-end plug-in library Front-end plug-in library DataTables Official website:https://www.datatables.net/ DataTables is a JavaScript function library of jQuery. Its purpose is to strengthen table operations (such as searching and sorting) and automatically add components into tables. It is very flexible and easy to use. LazyLoad Official website:Lazy LoadExtension:Vanilla JavaScript Lazy Load ..

Read more

Js and css introduced <link href=”css/prettyPhoto.css” rel=”stylesheet”/> <script src=”js/jquery.prettyPhoto.js”></script> Events <a href=”#” rel=”prettyPhoto” title=”bpm image” style=”display:none”></a> Set up <script type=”text/javascript”> $(document).ready(function(){ $(“a[rel^=’prettyPhoto’]”).prettyPhoto({ theme:’light_square’, //’dark_rounded’ show_title: false, social_tools: false, keyboard_shortcuts: true }); }); </script> Trigger You can bind yourself to a button’s click event. <script type=”text/javascript”> function viewPng(){ var png = ‘xxx.png’; $.prettyPhoto.open(png); } </script> References ..

Read more

Quote <link href=”css/jBootstrapPage.css” rel=”stylesheet”/> <script src=”js/jBootstrapPage.js”></script> Configuration <div> <ul class=”pagination”></ul> </div> <script type=”text/javascript”> var totalCount = 1; $(function(){ renderPage(1,1,totalCount); }); function renderPage(pageSize,selectedPageNo,total) { $(“.pagination”).jBootstrapPage({ pageSize : pageSize, total : total, maxPageButton:total/pageSize+1, lastSelectedIndex : selectedPageNo, onPageClicked: function(obj, pageIndex) { //ajax get page data getData(page,size); } }); } </script> Use function getData(page,size) { var data = {“keyword”: ..

Read more

Target of replacement <img class=”” id=”productview_icon” src=””> The object that triggered the event <img class=”change-display” data-icon_src=”xxx” src=””> event e.preventDefault(); var icon_src = e.currentTarget.dataset.icon_src; $(‘#productview_icon’).fadeIn().attr(‘src’, icon_src); I find that fadeIn effect cannot be achieved in this way.He directly changed to src, which had no effect at all.How to realize this function? Picture FadeIn test $(document).ready(function () ..

Read more

https://www.airbnb.com.tw/hos … Just press “Go.”Then disappeared from the leftFrom then on, a new right appears.There was no page change and it was smooth.The picture on the right will change accordingly.What technology can this be achieved? Designing this kind of page interaction is like using layers in Photoshop. Click the “Start” button to trigger the attribute ..

Read more

<div class=”tips_tab” onclick=”location.href=’tips? query=7′;” > <img class=”code_img<? =$nowUri==’/tips? query=7′ ? ‘a’:”; ? >” src=”../../images/tips7.png”> <div class=”code_title<? =$nowUri==’/tips? query=7′ ? ‘a’:”; ? > “> travel < /div > </div> .code_img{ height: 50px; -webkit-filter: grayscale(100%); filter: gray; transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out; } .code_title{ font-size: 13px; margin-top: 10px; color:#999; transition:0.2s ease-in-out; -webkit-transition:0.2s ease-in-out; -moz-transition:0.2s ..

Read more

https://store.snapchat.com/ When I find this page, he will draw the picture first.Then the word appearsHow will this be achieved? Did you pass jquery? supplement .ba { animation: anm_img_1 5s forwards; -webkit-animation: anm_img_1 5s forwards; width: 247px; } @keyframes anm_img_1 { 0%, 25% { opacity: 0; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); } 30%, ..

Read more