测试Markdown

Posted 2020-12-05 865cy

目录

• 准备
• 选择器
• 事件
• 效果
• 回调
• 链(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> 元素

事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

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 + "
状态: " + 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("数据: 
" + data + "
状态: " + 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 仍然在工作!");
  });
});