整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          零基礎學習HTML之JQ篇概述介紹與基礎和jquery選擇器

          Query概述

          jQuery是一個輕量級javascript庫兼容CSS3,還兼容各種瀏覽器。

          使用戶能更方便地處理HTML文檔、事件、實現動畫效果,并且方便地為網站提供Ajax交互。

          1.2 能做什么

          以插件的形式持續地通過開發加入新的功能

          獲取頁面的部分內容

          修改頁面的外觀

          修改頁面的內容

          在頁面中響應用戶的交互

          給頁面加上動畫

          無刷新返回服務器端的信息 ajax

          還提供了改進基本的 JavaScript 結構,如迭代和數組操作。

          1.3 其他javascript庫

          Prototype

          YUI

          Dojo

          mooTools

          jQuery不會與全局命名空間沖突,簡潔,只要花很少的時間去學習。

          2.1 jQuery下載

          當前版本3.1.1官方網站下載:jquery.com

          兩種版本,production ,development

          全部代碼地址: code.jquery.com

          建議:用什么版本的jquery,就用什么版本的手冊,測試環境用完整版(如:jquery1-11-3.js),生產環境用壓縮版(如:jquery1-11-3.min.js)

          2.2 jQuery安裝

          在頁面頭部head中,添加js

          //加入的jquery庫文件名,最好帶有此庫的版本名字,方便查詢相對應的版本手冊

          <script type="text/javascript" src="./script/jquery1.11.3.js"></script>

          jQuery基礎

          3.1 頁面載入

          $(document).ready(function(){ // 在這里寫你的代碼...}); //指的是:加載頁面后 再執行這段JS語句。

          簡寫方式:

          $(function($){// 你可以在這里繼續使用$作為別名...});

          綁定一個在DOM文檔載入完成后執行的函數

          同一個頁面上可以多次使用

          請確保在 <body> 元素的onload事件中沒有注冊函數,否則不會觸發$(document).ready()事件。

          jquery選擇器

          $('#id')根據給定的ID匹配一個元素

          $('.class')根據給定的類匹配元素

          $('tag')根據給定的元素名匹配所有元素

          $('li:eq(1)')獲取下標為1的li標簽

          $('#box li:last')獲取id為box的對象里面最后一個li標簽

          $('#box li:first')獲取id為box的對象里面第一個li標簽

          利用jQuery不但可以獲得代碼的最大兼容性,而且可以避免很多js錯誤的發生。

          因為jQuery有一個特色:如果獲取不到對象,那后面的操作就自動地不會執行了,而且不報錯。不像原生態的js語句

          通過關系查找

          $('.class').siblings();查找同輩的所有元素

          $('.class').children();查找子元素

          $('.class').next();查找同輩的下一個元素

          $('.class').nextAll();該元素之后所有的同輩元素

          $('.class').prev();查找同輩的上一個元素

          $('.class').prevAll();該元素之前所有的同輩元素

          $('.class').parent();查找元素的父輩

          下一節將講到 jquery對象與DOM對象等。

          貓商城效果圖

          html的代碼

          css代碼

          用原生js封裝jq

          原生js封裝jq的代碼

          下面的核心代碼,可以實現 $('#id .class tag').css('width',50);

          var $=function(args){

          return new Base(args);

          }

          function Base(args){

          this.elements=[];

          var childEvent=[];

          var node=[];

          if(typeof args=='string'){

          //css模擬

          if(args.indexOf(' ')!=-1){

          var elements=args.split(' ');

          for(var i=0;i<elements.length;i++){

          switch(elements[i].charAt(0)){

          case '#':

          childEvent=[];

          childEvent.push(document.getElementById(elements[i].substring(1)));

          node=childEvent;

          break;

          case '.':

          if(node.length==0){

          this.all=document.getElementsByTagName('*');

          for(var j=0;j<this.all.length;j++){

          childEvent=[];

          if(this.all[j].className==elements[i].substring(1)){

          childEvent.push(this.all[j]);

          node=childEvent;

          }

          }

          }else {

          childEvent=[];

          for(var j=0;j<node.length;j++){

          this.all=node[j].getElementsByTagName('*');

          for(var k=0;k<this.all.length;k++){

          if(this.all[k].className==elements[i].substring(1)){

          childEvent.push(this.all[k]);

          }

          }

          }

          node=childEvent;

          }

          break;

          default:

          if(node.length==0){

          childEvent=[];

          this.all=document.getElementsByTagName(elements[i]);

          for(var j=0;j<this.all.length;j++){

          childEvent.push(this.all[j]);

          node=childEvent;

          }

          }else {

          childEvent=[];

          for(var j=0;j<node.length;j++){

          this.all=node[j].getElementsByTagName(elements[i]);

          for(var k=0;k<this.all.length;k++){

          childEvent.push(this.all[k]);

          }

          }

          node=childEvent;

          }

          }

          }

          this.elements=node;

          }else{

          //find方法模擬

          switch(args.charAt(0)){

          case '#':

          this.getid(args.substring(1));

          break;

          case '.':

          this.getClass(args.substring(1));

          break;

          default:

          this.getTagName(args);

          }

          }

          }else if(typeof args=='object'){

          if(args !=undefined){

          this.elements[0]=args;

          }

          }else if(typeof args=='function'){

          this.ready(args);

          }

          }

          //定義css方法,這個就是設置css樣式的方法

          Base.prototype.css=function(arr,value){

          for(var i=0;i<this.elements.length;i++){

          if(arguments.length==1){

          return getStyle(this.elements[i],arr);

          }else{

          this.elements[i].style[arr]=value;

          }

          }

          return this;

          }

          記得多多關注喔

          要相信任何用戶提交上來的數據。我們在做表單的時候,雖然后臺會對表單提交的內容做一些判斷,但是我們在做優化的時候,最好要將一些不符合要求的數據扼殺在搖籃里面。

          用jquery來做這件事,那么最好不錯了。不多說直接上代碼

          html

          jq

          代碼

          $(function(){

          $('.confirm').on('click',function(){

          varinputName=$('#username').val();

          varinputTel=$('#tel').val();

          varpattern=newRegExp("[`~!@#$^&*()=|{}':;',\[\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");

          if(inputName!=""&&inputName!=null&&inputTel!=""&&inputTel!=null){

          if(pattern.test(inputName)){

          alert("非法字符!");

          returnfalse;

          }

          if(pattern.test(inputTel)){

          alert("非法字符!");

          returnfalse;

          }

          }

          vari=0;

          $("input").each(function(){ //遍歷input標簽,判斷是否有內容未填寫

          varvl=$(this).val();

          if(vl==""){

          i=1;

                }

               });

          if (i==1) { //如果有未填寫的,則return false阻止提交

          alert('請將信息填寫完整');

          returnfalse;

              }else{

          $('form').submit();

          }

          })

          $('.clear').on('click',function(){

          $('form')[0].reset();

          })

          })

          ps:希望喜歡我的朋友點贊,關注,轉發一下。

          網站開發,程序設計,UI等相關問題,編程技巧以及其他你想向我問的問題,來者不拒。


          主站蜘蛛池模板: 亚洲视频在线观看一区| 亚洲av无码一区二区乱子伦as | 亚洲AV无码一区二区三区牛牛| 成人精品一区二区三区电影| 韩国福利一区二区三区高清视频| 国精产品一区一区三区MBA下载| 国产精品视频一区二区三区无码| 乱中年女人伦av一区二区| 亚洲av综合av一区二区三区| 日韩精品无码一区二区三区不卡| 国产观看精品一区二区三区| 国产成人久久一区二区三区| 糖心vlog精品一区二区三区| 亚洲熟女www一区二区三区| 日韩精品无码一区二区三区免费| 在线观看午夜亚洲一区| 国模无码人体一区二区| 丰满人妻一区二区三区免费视频| 国产一区二区精品久久91| av一区二区三区人妻少妇| 亚洲精品色播一区二区| 亚洲AV日韩综合一区| 美女视频一区三区网站在线观看| 亚洲国产av一区二区三区丶| 麻豆AV一区二区三区| 国产精品久久一区二区三区| 国语精品一区二区三区| 极品少妇伦理一区二区| 白丝爆浆18禁一区二区三区| 成人免费区一区二区三区| 久久久精品人妻一区亚美研究所| 日韩精品乱码AV一区二区| 日本一区视频在线播放| 亚洲午夜福利AV一区二区无码| 国产萌白酱在线一区二区| 欧洲精品一区二区三区在线观看| 国产精品一区二区三区99| 无码精品人妻一区二区三区人妻斩 | 美女视频一区三区网站在线观看| AV无码精品一区二区三区宅噜噜| 国产天堂一区二区综合|