北风网66jquery

最新推荐文章于 2019-01-08 05:46:54 发布

hzw.000

最新推荐文章于 2019-01-08 05:46:54 发布

阅读量795

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/hzw05103020/article/details/46952715

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

44-2-设置开始，结束按钮--使标题为滚动文字，用主要setInterval，clearInterval函数,flag=true,false.

**********************************************************************

一，《jquery--66个\2.[jQuery]第1章.jQuery入门[下](ED2000.COM)》

< input type="button" value="确定"/> //元素名#id .class

$ ( function () {

$('input ').click ( function () {

alert('第一个jQuery程序！');

}) ;

} );

**********************************************************************

二，《jquery--66个\3.[jQuery]第2章.基础核心(ED2000.COM)》

先获取元素后，返回某个对象再调用.css()这个功能函数。

这个返回的对象其实也就是jQuery对象

$('#box').css('color','red').css('font-size', '50px'); //连缀

三，《jquery--66个\3.[jQuery]第2章.基础核心(ED2000.COM)》

先加载jQuery库文件，

再加载body元素，我们必须等待所有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。

方法1，window.onload =function () {}; //JavaScript等待加载

必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码:慢

方法2，

$( document ).ready ( function ( ){} ) ; //jQuery等待加载

简写成$ (function ( ) {} );

只需要等待网页中的DOM结构，加载完毕，就能执行包裹的代码:快

四，《jquery--66个\3.[jQuery]第2章.基础核心(ED2000.COM)》

返回原生的DOM 对象，

方法1，alert( document.getElementById('box')); //[objectHTMLDivElement]

方法2，jQuery 想要达到获取原生的DOM 对象，可以这么处理：

alert( $('#box').get(0)); //ID 元素的第一个原生DOM

五，《jquery--66个\3.[jQuery]第2章.基础核心(ED2000.COM)》

很多库，比如prototype、还有我们JavaScript 课程开发的Base 库，都使用“$”作为

基准起始符。

当Base 库在前引用，jquery库在后，$属于jquery库（靠近原则，谁后属于谁）。有：

jQuery.noConflict(); //将$符所有权剔除，$就属于base库，

var $$ = jQuery； //创建一个$$的jQuery 对象

4**********************************************************************

六，《jquery--66个\4.[jQuery]第3章.常规选择器[1](ED2000.COM)》

对dom节点选取3种方法：

1.js中document.getElementById（’’），document.getElementByTagName （’标签名’）

2.css 只为增加样式。

3.jquery

七，《jquery--66个\4.[jQuery]第3章.常规选择器[1](ED2000.COM)》

加载js文件用<script>…

加载CSS文件不同，

八，《jquery--66个\4.[jQuery]第3章.常规选择器[1](ED2000.COM)》

$( function () {

$('#box').css('color', 'blue'); //jquery中叫添加一个行为，这个行为是添加样式

} );

#box{ //css中叫添加一个样式

color:red;

}

九，《jquery--66个\4.[jQuery]第3章.常规选择器[1](ED2000.COM)》

元素名 #id.class

十，《jquery--66个\4.[jQuery]第3章.常规选择器[1](ED2000.COM)》

>大于号为只管子节点，不管孙子结点。

#box > p { //CSS 子选择器，IE6 不支持

color:red;

}

$('#box > p').css('color','red'); //jQuery 子选择器， IE6支持

十一，《jquery--66个\4.[jQuery]第3章.常规选择器[1](ED2000.COM)》

返回id=pox的第一个子节点jquery两种方法：

$('#pox').get(0) ;//点get为圆括号。

$('#pox')[0] ;// 直接为方括号。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

jquery视频--66个有代码\42.[jQuery]第16章.知问前端--自动补全UI[8](ED2000.COM)

一host,,源source引出要补充的内容。

二.ui-menu –item

三．autocomplete

jquery视频--66个有代码\43.[jQuery]第16章.知问前端--邮箱自动补全[9](ED2000.COM)

一？邮箱自动补全:域名后缀。

二？grep,map函数

50**********************************************************************

jquery视频--66个有代码\50.[jQuery]第16章.知问前端--验证注册表单[16](ED2000.COM)

一，提交为1200帧。

51**********************************************************************

jquery\jquery视频--66个有代码\51.[jQuery]第16章.知问前端--Ajax表单插件[17](ED2000.COM)

一，官方网站：http://malsup.com/jquery/form/

form.js 插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素

到决定如何管理提交进行的功能。

//ajaxForm 提交方式

$('#reg').ajaxForm(function () {

alert('提交成功！');

} );

注意：使用ajaxForm()方法，会直接实现ajax 提交。自动阻止了默认行为，而它

提交的默认页面是form 控件的action 属性的值。

提交的方式是method 属性的值。

//ajaxSubmit()提交方式

$('#reg').submit(function () {

$(this).ajaxSubmit(function() {

url :'test.php', //设置提交的url，可覆盖action 属性

target :'#box', //服务器返回的内容存放在#box 里

type : 'POST',//GET,POST

dataType :null, //xml,json,script，默认为null

clearForm :true, //成功提交后，清空表单

resetForm :true, //成功提交后，重置表单。reset后不一定为空，还可能会有原来默认值。

data : {//增加额外的数据提交

aaa : 'bbb',

ccc : 'ddd'.

beforeSubmit :function (formData, jqForm, options) {

alert(formData[0].name);//得到传递表单元素的name

alert(formData[0].value);//得到传递表单元素的value

alert(jqForm);//得到form 的jquery 对象

alert(options);//得到目前options 设置的属性

alert('正在提交中！！！');

return true;

success :function (responseText, statusText) {

alert(responseText+ statusText); //成功后回调

error :function (event, errorText, errorType) { //错误时调用

alert(errorText+ errorType);

} ,

} );

return false;

} );

注意：ajaxForm()方法，是针对form 直接提交的，所以阻止了默认行为。而ajaxSubmit()

方法，由于是针对submit( )方法的，所以需要手动阻止默认行为。

而使用了validate.js 验证插件，那么ajaxSubmit()比较适合我们。

52**********************************************************************

jquery视频--66个有代码\52.[jQuery]第16章.知问前端--Ajax提交表单[18]

一，phpMyadmin数据库

二．url写法不同：

css文件中。url (两点/img/ 后缀名)。

background:url(../img/loading.gif)no-repeat 20px center;

js文件中。 url ( 从兄弟节点开始写直到后缀名 )。

$('#loading').css('background', 'url(img/success.gif) no-repeat20px center').html('数据新增成功...');

三、数据交互中，，，数据交互成功

submitHandler : function (form) {

$(form).ajaxSubmit({

url: 'add.php', //将该文件提交到数据库中

type: 'POST',

beforeSubmit: function (formData, jqForm, options) {

$('#loading').dialog('open'); //open时默认加了30px,所以设置时height=原高-30px.

$('#reg').dialog('widget').find('button').eq(1).button('disable'); //提交前，使“提交”按钮失效，同时变灰。

success: function (responseText, statusText) {

if(responseText) {

$('#reg').dialog('widget').find('button').eq(1).button('enable'); //提交成功后，使“提交”按钮有效，

$('#loading').css('background','url(img/success.gif) no-repeat 20px center').html('数据新增成功...');

setTimeout(function () { //数据交互中，1000毫秒，数据新增成功

$('#loading').dialog('close');//成功后loading界面关闭

$('#reg').dialog('close');//成功后注册界面关闭

$('#reg').resetForm();//成功后重置注册界面

$('#regspan.star').html('*').removeClass('succ');//成功后重置注册界面变成星，移除钩，

$('#loading').css('background','url(img/loading.gif) no-repeat 20px center').html('数据交互中...');

}, 1000);

}

});

53**********************************************************************

jquery\jquery视频--66个有代码\53.[jQuery]第16章.知问前端--cookie插件[19]

一？官方网站：http://plugins.jquery.com/cookie/

//生成一个cookie：

$.cookie('user', 'bnbbs');

//设置cookie 参数

$.cookie('user', 'bnbbs', {

expires : 7, //过期时间，7 天后

path : '/', //设置路径，上一层

domain : 'www.ycku.com', //设置域名

secure : true, //默认为false，需要使用安全协议https

});

//关闭编码/解码，默认为false

$.cookie.raw = true;

//读取cookie 数据

alert($.cookie('user'));

//读取所有cookie 数据

alert($.cookie());

注意：读取所有的cookie 是以对象键值对存放的，所以，也可以$.cookie().user 获取。

//删除cookie

$.removeCookie('user');

//删除指定路径cookie

$.removeCookie('user', {

path : '/',

});

二？

if ($.cookie('user')) { //是用户

$('#member,#logout').show(); //显示退出

$('#reg_a,#login_a').hide(); //隐藏登陆界面

$('#member').html($.cookie('user'));//显示用户名

}else { //不是用户

$('#member,#logout').hide(); //隐藏退出

$('#reg_a,#login_a').show();//显示登陆界面

}

$('#logout').click(function () { //点退出，

$.removeCookie('user');//移除cookie

window.location.href= '/jquery/'; //回到首页

});

setTimeout(function () {

$('#loading').dialog('close');

$('#reg').dialog('close');

$('#reg').resetForm();

$('#regspan.star').html('*').removeClass('succ');

$('#loading').css('background','url(img/loading.gif) no-repeat 20px center').html('数据交互中...');

$('#member,#logout').show(); //显示退出

$('#reg_a,#login_a').hide();//隐藏登陆界面

$('#member').html($.cookie('user'));//显示用户名

} , 1000);

54**********************************************************************

jquery\jquery视频--66个有代码\54.[jQuery]第16章.知问前端--Ajax登录[20]

一？在部分环境下，所有php要设置编码格式：UTF8 （无BOM—Byte Order Mark

字节序标记），否则验证无法提醒。

二？服务器端代码（拷入数据库文件夹中）

//is_user.php通过user判断是否用户。

<?php

require 'config.php';

$query = mysql_query("SELECT user FROM user WHERE user='{$_POST['user']}' ")ordie('SQL 错误！');

if(mysql_fetch_array($query, MYSQL_ASSOC) ) { //有值

echo 'false'; //有值，说明该用户已被注册，返回false

} else { //无值

echo 'true';// 无值，说明该用户未被注册，返回true

}

mysql_close();

//login.php 登录时，判断用户名和密码是否正确

<?php

require 'config.php';

$_pass = sha1($_POST['login_pass']);

$query =mysql_query("SELECT user,pass FROM user WHERE

user='{$_POST['login_user']}'AND pass='{$_pass}'") or die('SQL 错误！');

if (mysql_fetch_array($query, MYSQL_ASSOC)) {

echo 'true';

} else {

echo 'false';

}

mysql_close();

三？jQuery 代码

//判断是否一周有效

if ( $('#expires').is(':checked') ) {

$.cookie( 'user',$('#login_user').val(), {

expires : 7, //登录7天有效

} ) ;

} else {

$.cookie( 'user',$('#login_user').val() );

}

55**********************************************************************

jquery\jquery视频--66个有代码\55.[jQuery]第16章.知问前端--选项卡UI[上][21]

选项卡（tab），是一种能提供给用户在同一个页面切换不同内容的UI。尤其是在页

面布局紧凑的页面上，提供了非常好的用户体验。

一．使用tabs

使用tabs 比较简单，但需要按照指定的规范即可。

//HTML部分

<ul>

</ul>

<div id="tabs1">tab1-content</div>

<div id="tabs2">tab2-content</div>

<div id="tabs3">tab3-content</div>

</div>

//jQuery部分

$('#tabs').tabs();

二．修改tabs 样式

在弹出的tabs 对话框中，在火狐浏览器中打开Firebug 或者右击->查看元素。

//无须修改ui 里的CSS，直接用style.css替代掉

.ui-widget-header {

background:url (../img/ui_header_bg.png) ;

}

//去掉外边框

#tabs {

border:none;

}

//内容区域修饰

#tabs1, #tabs2, #tabs3 {

height:100px;

padding:10px;

border:1px solid #aaa;

border-top:none;

position:relative;

top:-2px; //消除两个框接壤处的缝隙

}

三．tabs()方法的属性

选项卡方法有两种形式：

1.tabs(options)。options 是以对象键值对的形式传参，每个键值对表示一个选项；

2.tabs('action', param)。action 是操作选项卡方法的字符串，param则是options 的某个选项。

tabs 外观选项

举例：

$('#tabs').tabs({

collapsible : true,

disabled : [0],

event : 'mouseover',

active : false,

heightStyle : 'content',

hide : true,

show : true,

});

56**********************************************************************

jquery\jquery视频--66个有代码\55.[jQuery]第16章.知问前端--选项卡UI[下][22]

$('#button').click( function () {

$('#tabs').tabs('load',0); //按钮局部刷新某一tab0，无需整个浏览器刷新

});

57**********************************************************************

jquery\jquery视频--66个有代码\57.[jQuery]第16章.知问前端--折迭菜单UI[23]

一，//HTML 部分

<div>

</div>

</div>

//jQuery部分

$('#accordion').accordion();

二，选项卡tabs 和折迭菜单accordion ：属性，方法类似。

不同点：1. $('#accordion').accordion('disable'，0); 全禁用

$('#tabs').tabs('disable', 0); 只禁用第一个，

collapsible：active	T：T	T：F	F：T	F：F
默认	折叠
鼠标事件	展开

//设置accordion 的options 值

$('#accordion').accordion('option','active', 1); //打开网页时默认展开为1

三，含多个部分，布局主页面，

html中：

<divclass="main_left"> //主页面的左边

<divid="tabs">

<ul>

</ul>

</div>

<divclass="main_right"> //主页面的右边

<divid="accordion">

</div>

CSS中

#main {

width:800px;

margin:0auto;

padding:10px0 0 0;

}

#main .main_left {

width:580px;

float:left;

}

#main.main_right {

width:200px;

float:right;

}

#tabs {

border:none;

}

#accordion{

//可为空

}

58**********************************************************************

jquery视频--66个有代码\58.[jQuery]第16章.知问前端--编辑器插件[24]

一？提示信息

index.html中写：标签。

例<div id="error">请登录后操作...</div>

index.js中写：$(‘元素名#id点class’) 。

例$('#error').dialog({

autoOpen :false,

modal : true,

closeOnEscape :false,

resizable :false,

draggable :false,

width : 180,

height : 50,

}).parent().find('.ui-widget-header').hide();

css中写布局：元素名#id点class。

例#error {

background:url(../img/error.png)no-repeat 20px center;

line-height:28px;

font-size:14px;

font-weight:bold;

text-indent:40px;

color:#666;

}

二？引入uEditor需4步，视频从4000开始

第一步：把编辑器文件夹包放入根目录下。

第二步：在index.html中

引入uEditor.js 和uEditor.css ，jquery-migrate-1.2.1.js (排除编辑器低版本)三个文件。

第三步：插入textarea，设置规定值，需2步。

<p>

<labelfor="title">问题名称：</label>

<inputtype="text" name="title" style="width:390px;"class="text" id="title" />

</p>

<p>

<textareaclass="uEditorCustom" name="content">请输入问题描述！</textarea>

</p>

</form>

第四步：jQuery 调用运行。index.js中调用$('.uEditorCustom').uEditor();

59**********************************************************************

jquery视频--66个有代码\59.[jQuery]第16章.知问前端--Ajax提问[25]

无笔记

60**********************************************************************

jquery视频--66个有代码\60.[jQuery]第16章.知问前端--Ajax显示[上][26]

1200帧有show_content.php讲解。一个json代表一个对象。

张开content.down全部，收起content.up。----重听

61**********************************************************************

jquery视频--66个有代码\61.[jQuery]第16章.知问前端--Ajax显示[下] [27]

用高度控制张开的内容，可能会出现半截子汉字。------重听

62**********************************************************************

jquery视频--66个有代码\62.[jQuery]第16章.知问前端--Ajax提交评论[上][28]

一，显示“发表评论”输入框（即表单）----展开，隐藏----100帧.

代码加入服务器(“wamp服务器”用法有图片)：

S1：将code2代开后所有代码ctrl+A拷入”sawp\www\文件夹空jquery”中。

S2:FF 浏览器中输入localhost/jquery

二，

$.each( $('.bottom'), function (index,value) {

$(this).on('click','.comment', function () { //该输入下的评论

if($.cookie('user')) {

if(!$('.comment_list').eq(index).has('form').length) { //有评论才添加框

$('.comment_list').eq(index).append('<form><dlclass="comment_add"><dt><textareaname="comment"></textarea></dt><dd><inputtype="button" value="发表"/></dd></dl></form>');

}

if($('.comment_list').eq(index).is(':hidden')) {

$('.comment_list').eq(index).show();

}else {

$('.comment_list').eq(index).hide();

}

}else {

$('#error').dialog('open');

setTimeout(function() {

$('#error').dialog('close');

$('#login').dialog('open');

},1000);

}

});

63**********************************************************************

jquery视频--66个有代码\63.[jQuery]第16章.知问前端--Ajax提交评论[下][29]

一，“phpmyadmin用法”有图片。

二，查看网页button的父节点，1，选中“button”2，鼠标右击，点firebug

三，

$('.comment_list').eq(index).find('input[type=button]').button().click(function() {

var_this = this;

$('.comment_list').eq(index).find('form').ajaxSubmit({

url: 'add_comment.php',

type: 'POST',

beforeSubmit: function (formData, jqForm, options) {

$('#loading').dialog('open');

$(_this).button('disable');//评论中无字时，发表变灰

success: function (responseText, statusText) {

if(responseText) {

$(_this).button('enable');

$('#loading').css('background','url(img/success.gif) no-repeat 20px center').html('数据新增成功...');

setTimeout(function() {

$('#loading').dialog('close');

$('.comment_list').eq(index).find('form').resetForm();

$('#loading').css('background','url(img/loading.gif) no-repeat 20px center').html('数据交互中...');

},1000);

}

});

64**********************************************************************

jquery视频--66个有代码\64.[jQuery]第16章.知问前端--Ajax显示评论[30]

一，php中

//显示该内容有多少评论

$query = mysql_query(" SELECT ( SELECT COUNT(*) FROMcomment WHERE titleid=a.id )AS count,a.id,a.title,a.content,a.user,a.date FROM question a ORDER BY a.date DESC LIMIT0,10") or die('SQL 错误！'); //起别名

二，

//提交评论，自动显示

var date = new Date(); //刚评论的在前

$('.comment_list').eq(index).prepend('<dlclass="comment_content"><dt>' + $.cookie('user')

+ '</dt><dd>' +$('.comment_list').eq(index).find('textarea').val() + '</dd><dd>' +

date.getFullYear() + '-' +(date.getMonth()+ 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' +

date.getMinutes() + ':' + date.getSeconds()+ '</dd></dl>');

65**********************************************************************

jquery视频--66个有代码\65.[jQuery]第16章.知问前端--Ajax加载更多[31]

一，$_pagesize =2;//分页时每页显示2条，

二，有ajax时，用POST，而不用GET，

三，