jquery的学习

在对javascript脚本语言有了深层次的学习后,决定来学习在他基础上产生的jquery

一、认识

  jquery是一个轻量级的js库,可以帮助你写的更少实现的更多,因此在学习了jquery后将可以替换原生js的写法(主要是查找元素并且为其添加事件这些,还有ajax也有不同的写法)

二、使用

  jquery可以通过打包进入你的页面中使用也可以下载到你的计算机上使用,前者需要有网络

三、语法

    理解这个名字就行了,通过这个库进行query页面元素并对其进行一些操作

   基础语法:$(‘selector‘).action() 美元符号是对jquery的定义   

   action是你要添加的一些事件 如{click,hide,ready,css,dbclick,mouseover,focus,mouseenter,change,one,bind(相当于addenventlistener),blur(失去焦点),

slideToggle(隐藏或显示),delegate(为选中元素的子元素添加事件)

 live\die  使用live为选中元素添加事件,使用die去除

 error,replacewith如果所选元素错误时发生error事件

hide\show(显示隐藏)   $(selector).hide(1000,callback);  toggle替代show、hide

fidein\fadeout\fadetoggle\fadeto (淡入淡出)    fadeTo(3000(或者slow),0.6,callback);    也可以添加回调函数

slidedown\slideuo\slidetoggle(滑动效果)

stop()(使有延迟speed的动画停止)

!!!!!!如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。

 

 

 

 

 

 

 

     $(document).ready(function(){ ...  })  相当于原生中的onload.function          在页面加载完成前的事件:可能会出错,比如事件中有隐藏不存在的元素,或获取不存在的元素;

四、jquery选择器

       1、jquery元素选择器:$(.abc).onclick   #abc     p                     

           $("p.intro") 选取所有 class="intro" 的 <p> 元素。

            $("p#demo") 选取所有 id="demo" 的 <p> 元素。

        2、jquert属性选择器:$(“[href]”)  href=’#‘  href!=’#‘       href$=‘.jpg‘(选取所有属性以jpg结尾的元素)

        3、jquery样式选择器

             $("p").css("background-color","red");

五、jquery事件函数(指触发的一些调用)

         $(.abc).click = function () {    $(p).hide();    }

          jquery名称冲突:                          

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

  六、jquery动画(animate())

     $("button").click(function(){

     $("div").animate({left:‘250px‘},fast,function() {....});   callback回调函数是动画完成后执行的

     });   //animate中可以添加多条属性

   !!!!!默认的html源数都有一个静态位置,无法移动,如果要操作位置需要设置position

    !!!!!!不可以设置色彩  需要下载 Color Animations 插件

    使用相对值:width:‘+=150px’,

     使用预定义的值:height:‘toggle’

      队列$("button").click(function(){

   var div = $("div");

   div.animate({},"speed",callback)  操作1

    div.animate({},"speed",callback)  操作2

     div.animate({},"speed",callback)     操作3

     })

七、Chaining (链) 允许为元素添加多个jquery方法

    $("#p1").css("color","red")

     .slideUp(2000)

  .slideDown(2000);   \\标准写法




jquery dom

   一、 text(设置或返回所选元素文本内容)

     html(设置或返回所选元素内容 包括html标记)  alert("html:"+$(.test).html());

    val() 设置返回单字段值    alert(”value:“$(.test).val());

      attr("获取元素链接的href属性值")

    二、text、html、val,attr的回调函数(所选元素下标i,原本的值)

         $("#test1").text(function(i,origText){

        return "Old text: " + origText + " New text: Hello world!
        (   index: " + i + ")";

     三、添加\删除\css类\

       append() 被选元素结尾插入内容

       prepend() 被选元素开头插入内容

       after() 被选元素之后插入内容

       before()被选元素之前插入内容 

          使用append(prepend)添加新元素:html:var nele = ”<p>123</p>“

                     jquery var nele = $("<p></p>").text(”123“)

                      dom:  var nele = document.createelement("p");

                     $("p").append(nele); 

        使用before,after同上,更换相应事件方法名即可

     *********************over添加****************************

    remove()删除元素及其子元素                               empty删除被选元素的子元素

     $("p").remove(.italic)删除所有class=italic的p元素

   *************************over删除***********************

    jquery拥有若干对css进行操作的方法

   addclass()向被选元素添加一个或多个类   addclass(”blue important“) 括号里的两个为已经设置好的css名称  可选中         多 个元素,逗号隔开用双引号括起来

   removeclass()  从被选元素删除一个或多个类

   toggleclass() 对被选元素进行添加\删除的切换操作

   css() 设置or返回样式属性

       $("div").css("font-size");返回首个匹配元素的font-size值

       $("div").css("color","yellow");  如需设置多个样式使用花括号的形式({”color”:“green“,”font-size“:”16px“});

 ***************************over handle for css**********************8

    !!!!!!!!!!!尺寸:width返回不包括内边距               innerwidth返回包括内边距

       

jquery 遍历

要清晰后代的概念,子元素只隔了一层,后代使隔了>1层的
jquery提供多种遍历方法,最大的遍历种类使数遍历

一、树中向上,向下,同级遍历(遍历dom树)
向上:parent(),直接父元素 parents() 所有父元素 parentsUntil(object elementnode)
向下:children().... children(p.1) 返回类名为1的所有p
find(“div”) 返回被选元素中所有span元素 find(“*”)返回所有后代
同胞:next nextuntil nextall siblings pre preall preuntil
过滤:first()\last()\eq(1)返回被选元素中带索引号的 filter\not





jquery ajax
jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。)
  $("#div1").load("test.txt",data,callback)
data是要发送的参数 callback是load执行完成后调用的事件
callback函数包括以下参数: reponseTxt(包含成功的结果内容) status(调用状态) xhr(包括xmlhttprequest对象)
xhr对象有status,statusText等属性
Get有缓存 Post无缓存 $.get(url,data,callback)

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>
</head>
<body>

<button>向页面发送 HTTP POST 请求,并获得返回的结果</button>

</body>
</html>



Jquery noConflict() 释放$标识符控制:$.noConflict or 替换var jq = $.noConflict








 

jquery的学习

上一篇:NodeJS中模块导出两种方式【exports和module.exports】的联系与区别


下一篇:HttpRunner3源码阅读:5. 参数/函数调用及其值处理