测试Markdown

标签：asc   mouse   鼠标事件   markdown   从服务器   入口   success   xtu   位置   

目录

• 准备
• 选择器
• 事件
• 效果
• 回调
• 链(Chaining)
• 获取内容和属性
• 设置内容和属性
• 添加元素
• 删除元素
• 获取并设置 CSS 类
• 尺寸
• 滚轮
• 遍历
• 过滤
• 扩展
• AJAX
• noConflict() 方法

准备

jquery

• 防止文档在完全加载（就绪）之前运行 jQuery 代码

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

$(function(){
    // 开始写 jQuery 代码...
});

JavaScript

• JavaScript 入口函数:
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

window.onload = function () {
    // 执行代码
}

选择器

$("*")  选取所有元素  
$(this) 选取当前 HTML 元素    
$("p.intro")    选取 class 为 intro 的 <p> 元素
$("p:first")    选取第一个 <p> 元素    
$("ul li:first")    选取第一个 <ul> 元素的第一个 <li> 元素   
$("ul li:first-child")  选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素 
$("a[target=‘_blank‘]") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 
$("a[target!=‘_blank‘]")    选取所有 target 属性值不等于 "_blank" 的 <a> 元素    
$(":button")    选取所有 type="button" 的 <input> 元素 和 <button> 元素   
$("tr:even")    选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素

事件

dblclick()
当双击元素时，会发生 dblclick 事件。

mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。


mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。


hover()
hover()方法用于模拟光标悬停事件。


focus()
当元素获得焦点时，发生 focus 事件。


 1.keydown：在键盘上按下某键时发生
     一直按着则会不断触发（opera浏览器除外
     它返回的是键盘代码;
 
 2.keypress：在键盘上按下一个按键
    并产生一个字符时发生, 返回ASCII码。
    注意: shift、alt、ctrl等键按下并不会产生字符
    所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的
    按键时keypress事件才会触发。若一直按着某按键则会不断触发。
 
 
 3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

效果

• 隐藏和显示

$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。


使用 toggle() 方法来切换 hide() 和 show() 方法
$(selector).toggle(speed,callback);

• 淡入淡出

jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
$(selector).fadeToggle(speed,callback);

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);

• 滑动

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);

jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);


jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
$(selector).slideToggle(speed,callback);

• 动画

jQuery animate() 方法用于创建自定义动画。
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

多个操作

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });
});

使用相对值

$("button").click(function(){
  $("div").animate({
    left:‘250px‘,
    height:‘+=150px‘,
    width:‘+=150px‘
  });
});

使用预定义的值

$("button").click(function(){
  $("div").animate({
    height:‘toggle‘
  });
});

使用队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
  div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
});

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。


$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

回调

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

链(Chaining)

链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

获取内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr(‘属性‘) 方法用于获取属性值。


clone()  复制

设置内容和属性

text(值) - 设置或返回所选元素的文本内容
html(值) - 设置或返回所选元素的内容（包括 HTML 标记）
val(‘值‘) - 设置或返回表单字段的值
attr(‘属性‘,‘值‘) 方法用于设置属性值。

<!---->用于CheckBox,radio (1,2版本用法)
prop(‘checked‘)  /获取
prop(‘checked‘,true)  /设置
prop(‘checked‘,false)

• attr 回调

$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

添加元素

• 创建元素三种方法

    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

append("追加文本") - 在被选元素的结尾插入内容
prepend("追加文本") - 在被选元素的开头插入内容
after("追加文本") - 在被选元素之后插入内容
before("追加文本") - 在被选元素之前插入内容

总结: append/prepend 是在选择元素内部嵌入.

after/before 是在元素外面追加。

删除元素

jQuery remove() 方法删除被选元素及其子元素。


jQuery empty() 方法删除被选元素的子元素。

• 过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
$("p").remove(".italic");

获取并设置 CSS 类

addClass("cls.name") 方法
removeClass("cls.name") 方法

toggleClass() 方法
对被选元素进行添加/删除类的切换操作

返回 CSS 属性
css("propertyname");

设置 CSS 属性
css("propertyname","value");

设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...});

尺寸

width()
height()
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。


innerWidth()
innerHeight()
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth()
outerHeight()
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

滚轮

<!---->返回顶部
$(window).scrollTop(0)

<!---->获取滑轮坐标
$(window).scrollTop() 

<!---->左滑轮
$(window).scrollLeft()

offset([coordinates])
获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
$("p:last").offset({ top: 10, left: 30 });

遍历

祖先

parent() 方法返回被选元素的直接父元素。

jQuery parents() 方法
返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。



返回介于 <span> 与 <div> 元素之间的所有祖先元素：
$(document).ready(function(){
  $("span").parentsUntil("div");
});

后代

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

同胞

siblings() 方法返回被选元素的所有同胞元素。

next() 方法返回被选元素的下一个同胞元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。



返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
$(document).ready(function(){
  $("h2").nextUntil("h6");
});

prev()
prevAll() 
prevUntil()
方法的工作方式与上面的方法类似
只不过方向相反而已：它们返回的是前面的同胞元素
在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

过滤

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

返回带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").filter(".url");
});

not() 方法返回不匹配标准的所有元素。

返回不带有类名 "url" 的所有 <p> 元素：
$(document).ready(function(){
  $("p").not(".url");
});

扩展

$.extend({
    ‘wangsen‘:function(){
        consle.log(‘sb‘);
    }
});
$.wangsen()

$.fn.extend({
    ‘aaaa‘:function(){
        consle.log(‘sb‘);
    }

$(‘.c1‘).aaaa()

基于自执行函数包括防止全局变量冲突

(function(arg){

})($);

AJAX

jQuery Ajax 参考手册

AJAX 教程

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

AJAX load() 方法

$.ajax({
    url: "",
    type: "GET" or "POST",
    async   布尔值，表示请求是否异步处理。默认是 true。
    beforeSend(xhr) 发送请求前运行的函数。
    timeout 设置本地的请求超时时间（以毫秒计）。
    自动解析为字符串
    dataType: "JSON",
    允许发送字典
    traditional: true,
    // data: {"xxx",$(‘xxx‘).val(),....}
    data: $(‘#form‘).serialize()
    
    success : function(result) {//返回数据根据结果进行相应的处理 
     }
     error: funct(){
    }
})

load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

<!-- txt 读取-->
$("#div1").load("demo_test.txt");

<!-- jQuery 选择器添加到 URL 参数-->
$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
 
load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

AJAX get() 和 post() 方法

GET - 从指定的资源请求数据

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：
$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

POST - 向指定的资源提交要处理的数据

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:
$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

实例
<!---->原生
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

<!---->定义名字
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

$.noConflict();函数内部
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

测试Markdown

标签：asc   mouse   鼠标事件   markdown   从服务器   入口   success   xtu   位置   

原文地址：https://www.cnblogs.com/865cy/p/9337348.html