整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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來做這件事，那么最好不錯了。不多說直接上代碼
代碼
$(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等相關問題，編程技巧以及其他你想向我問的問題，來者不拒。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
