整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
