IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【废弃】JQuery -> 正文阅读

[JavaScript知识库]【废弃】JQuery

文档在完全加载之后才运行,jquery在元素上A绑定事件时,首先会在docment中查找该元素A,如果没有找到则绑定失败。 
$(function(){});		 		//$    <==>   JQuery()		//$()  <==>   $( document ).ready()                                   

//左右折叠展开:   
$("#mapOp").animate({width:'toggle'},350); 
$(selector).animate({params},speed,callback);//Callback 函数在当前动画 100% 完成之后执行。
$(selector).stop(stopAll,goToEnd);//jQuery stop() 方法用于停止动画或效果,在它们完成之前

$('.msg').find('.msg-content').css({
}); 

$("click", function(){ alert("Hello World!"); });//事件类型,回调函数
//设置属性  
$("#foldmMapOp").attr({ 'title': '展开')
//获取属性  
$("#test").attr("value")  //<==>$("#test").val()      
//设置样式       
$('#mapCon').css({
    "position": "absolute",
    "height": "calc(100% - 51px)",
    "width": "calc(100% + 230px)",
    'background':'url(img/webmap.png) 148px -76px white'
})

$.post(url,data,function(data,status){})  //$(selector).post(URL,data,function(data,status,xhr),dataType返回类型)
//$.post(地址,数据,请求成功后所执行的函数名 );

$.get() //方法通过 HTTP GET 请求从服务器上请求数据。
//$.get(URL,function(data,status){});

//load() 方法是简单但强大的 AJAX 方法
    $(selector).load(URL,data可空,callback);
        可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
        可选的 callback 参数是 load() 方法完成后所执行的函数名称。//	从服务器加载数据,并把返回的数据放置到指定的元素中
//所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
    $.ajax({
        headers: {        Accept: "application/json; charset=utf-8"    },
        type: "get",
        success: function (data) {    },
        complete:function( jqXHR, textStatus ){ if(jqXHR.status==201){} }
        //jqXHR包含responseText和responseXML属性,以及getResponseHeader()方法
        //textStatus:("success","notmodified","nocontent","error","timeout","abort",或"parsererror")
    });



取高度:
width() height()  innerWidth() innerHeight() #padding   
outerWidth() outerHeight() #border 
outerWidth(true) outerHeight(true) #margin

 阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)
return false;
//当你每次调用”return false“的时候,它实际上做了3件事情:
//1 event.preventDefault();
//2 event.stopPropagation();
//3 停止回调函数执行并立即返回。

$("p.test").hide()  
$(this).hide();    //$(this)选取当前 HTML 元素 ,hide(”效果“,函数) 隐藏类为test的p元素,使其style的display:none;
toggle()//切换显示
toggleClass(className) //add or delete ,no effect to otherclassName
switchClass(removeClassName,addClassName [,duration] [,easing] [,complete])

设置内容	
$("#test").text("Hello world!");            //获得内容 - text()、html() 以及 
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容


//attr() 方法设置或返回被选元素的属性和值  
$("img").attr("width","500");

val() 方法返回或设置被选元素的 value 属性。
jQuery UI 工作原理	//$("#elem" ).progressbar(); //此代码把 元素 转化为一个进度条控件
Bootstrap 工作原理  //通过属性标签 或 css类(80%) 或 类似jQuery UI 把 元素 转换为好看的样式 或 控件

//绑定事件:
$("p").bind("click", {msg: "你刚点击了!"}, handlerName)   
function handlerName(e) {	alert(e.data.msg);}   


//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素: 
$("p").siblings(".selected")


jQuery		 = new jQuery.fn.init( selector, context ) 	 //返回的还是jQuery
jQuery.fn 		 = jQuery.prototype = {键值对集}		 //jquery的属性集
jQuery.fn.extend	 = jQuery.extend 


$.extend( target [, object1 ] [, objectN ] )  //合并目标,被合并对象1,被合并对象n

$.Deferred() 构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传递任何同步或异步功能成功或失败的状态。   它是jQuery对Promises接口的实现
$.Deferred() 生成一个deferred对象。
deferred.done() 指定操作成功时的回调函数
deferred.fail() 指定操作失败时的回调函数
deferred.promise() 只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变
deferred.resolve() 手动改变deferred对象的运行状态为"已完成",从而立即触发done()方法
deferred.reject() 调用后将deferred对象的运行状态变为"已失败",从而立即触发fail()方法
$.when() 为多个操作指定回调函数
eferred.then()有时为了省事,可以把done()和fail()合在一起写,这就是then()方法。



JQuery Mobile
HBuilder的内置服务器有问题,get不报错,post就报错,草。。
<a href="#第二页" data-transition="slide" data-direction="reverse">切换</a>
反向滑动效果到第二页
<a href="#第二页" data-role="button">按钮</a>
把超链接改为按钮,变好看了666
<a href="#pagetwo" data-role="button" data-inline="true">访问第二个页面</a>
内联:被紧紧包裹着
返回按钮<a href="#" data-role="button" data-rel="back">返回</a>
表单元素必须有一个标签设置 for 属性 来匹配
jquery mobile页面默认采用ajax方式进行交互,而ajax方式下是不支持f://的,也就是本地文件,所以有两种解决办法:
<a data-ajax="false"或者 rel="external"
<form data-ajax="false">
id不要重复
500错误:1.服务器问题,换个服务器
用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可以在onsubmit中验证.但是从事件触发顺序上来说,onclick更早.顺序是:
用户点击按钮->onclick->如果onclick返回有效或未处理onclick则提交表单->onsubmit->如果onsubmit未处理或返回true,则提交,否则取消提交.
onsubmit中返回false会引起取消表单提交;
onclick中返回false则会引起此次点击操作被判断为无效,则也就不会引起表单
表单提交跳转不了,显示内部服务器错误 :form的data-ajax被关闭,原页面会被整体刷新
$.mobile.changePage("content/first.html","slidedown", true, true);

DOJO
// dojo 1.7(AMD)//加载dojo / fx.js:
require([ “dojo / fx” ], function (fx ){ 
    //写下你的代码
});
// Dojo <1.7 //加载dojo / fx.js:
dojo.require(“dojo.fx” );
//注意require的顺序,和回调函数的参数顺序要一致!!!!!!,不然会出现未定义错误!
//Dojo 中 djConfig="parseOnLoad: true" 的用途:启用Dojo的解析模块对Dojo标签进行解析

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-26 11:33:45  更:2022-04-26 11:34:47 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 2:07:50-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码