网站开发之jQuery篇

作者: 平安喜乐698 | 来源:发表于2018-04-12 21:15 被阅读21次

目录
    1. 简介
    2. 使用
        2.1. 获取元素（或元素组）
        2.2. 做操作
            2.2.1 常用操作
            2.2.2 动画

jQuerry选择器

1. 简介

jQuery 是对JavaScript的封装
    不是 W3C 标准

有2个版本：
    精简版（用于生产）
    开发版（用于研究）

主要的jQuery函数：
    $() 
使用用别的标识符（如：cx）替换$
    var cx=jQuery.noConflict()
    cx("p").hide();
通过css选择器或直接传入html对象来选取元素
    不能使用html对象的属性和方法
    $("#myId")
    $(body)
写在read函数中
    $(document).ready(myFunction);
    $(document).ready(function myFunction(){
    });
支持链式编程
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
    $("#p1").css("color","red")
                  .slideUp(2000)
                  .slideDown(2000);
内容保存在单独的.js文件

使用：

方式一（head中引用，大多数）
    优势：其他网站引用过则会缓存在浏览器上
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
方式二（下载下来再引用）

举例

// -----------js方式-----------
function myFunction(){
    var obj=document.getElementById("myTitle");
    obj.innerHTML="Hello jQuery";
}
// onload：页面加载完毕后调用
onload=myFunction;


等价

// -----------jQuery 方式-----------
function myFunction(){ 
    $("#myTitle").html("Hello jQuery")
}
// 等价于onload
$(document).ready(myFunction);

2. 使用

2.1. 获取元素（或元素组）

可以灵活地结合使用

常见

元素为p
    $("p")
id为myId的元素
    $("#myId")
class为myClass的元素
    $(".myClass")

class为myClass且myClass2的元素
    $(".myClass.myClass2")
p元素中class为myClass的元素
    $("p.myClass")
p元素中id为myId的元素
    $("p#myId")    
p元素中id为myId的元素的子孙类class为myClass的元素
    $("p#myId .myClass")

属性相关

所有带有属性href的元素
    $("[href]")
所有带有属性href=#的元素
    $("[href='#']")
所有带有属性href!=#的元素
    $("[href!='#']")
所有带有属性href以".jpg" 结尾的元素
    $("[href$='.jpg']")

第一个p元素
    $("p:first")
最后一个p元素
    $("p:last")

所有偶数tr元素
    $("tr:even")
所有奇数tr元素
    $("tr:odd")

第四个li元素
    $("ul li:eq(3)")
index大于3的所有li元素
    $("ul li:gt(3)")
index小于3的所有li元素
    $("ul li:lt(3)")

所有标题元素 <h1> - <h6>
    $(":header")
所有动画元素
    $(":animated")
包含指定字符串的所有元素
    $(":contains('W3School')")
无子（元素）节点的所有元素
    $(":empty")
所有隐藏的p元素
    $("p:hidden")
所有可见的p元素
    $("p:visible")

input相关

所有不为空的 input 元素
    $("input:not(:empty)")

所有 <input> 元素
    $(":input")
所有 type="text" 的 <input> 元素
    $(":text")
所有 type="password" 的 <input> 元素
    $(":password")
所有 type="radio" 的 <input> 元素
    $(":radio")
所有 type="checkbox" 的 <input> 元素
    $(":checkbox")
所有 type="submit" 的 <input> 元素
    $(":submit")
所有 type="reset" 的 <input> 元素
    $(":reset")
所有 type="button" 的 <input> 元素
    $(":button")
所有 type="image" 的 <input> 元素
    $(":image")
所有 type="file" 的 <input> 元素
    $(":file")
所有激活的 input 元素
    $(":enabled")
所有禁用的 input 元素
    $(":disabled")
所有被选取的 input 元素
    $(":selected")
所有被选中的 input 元素
    $(":checked")

父子元素相关

直接父元素
    $("span").parent();
所有父元素
    $("span").parents();
所有url父元素
    $("span").parents("ul");
直到div元素的所有父元素
    $("span").parentsUntil("div");
最近定位的父元素
    $('span').offsetParent()


所有直接子元素
    $("div").children();
所有子元素类型为p且class为myClass的直接子元素
    $("div").children("p.myClass");
所有子元素
    $("div").find("*");
所有span子元素
    $("div").find("span");
第三个
    $("body").find("div").eq(2);
最后一个
    $("p").find("span").end()

将 p元素中第一个开始共2个 放入b元素中
  $("p").slice(0, 2).wrapInner("<b></b>");
所有同级元素
    $("h2").siblings();
所有p同级元素
    $("h2").siblings("p");    ".hh"
下一个同级元素
    $("h2").next();
所有后边的同级元素
    $("h2").nextAll();
所有后边直到h6的同级元素
    $("h2").nextUntil("h6");
上一个同级元素
    $("h2").prev();
之前的所有同级元素
    $("h2").prevAll();
所有前边直到h6（不含）的同级元素
    $("h2").prevUntil("h6");
id为p的元素一直往上到id为hh（不含）所有dd元素
    $("#p").prevUntil(document.getElementById('hh'), "dd")

获取div元素的首个p子元素
    $("div p").first();
获取div元素的最后一个p子元素
    $("div p").last();
获取div元素的第一个子元素
    $("p").eq(0);
获取div元素的class为myClass子元素
    $("p").filter(".myClass");
获取div元素的class不为myClass子元素
    $("p").not(".myClass");
是否是指定元素（false true）
    $("p").is("form")
有则返回该元素
    $("ul").has("li")
遍历
    $("li").each(function(){
    });
获得匹配元素集合中每个元素的子元素，包括文本和注释节点
    $("p").contents()
p元素最近的li元素
    $("p").closest("li")
包括div
    $("div").find("p").andSelf()

第1个p元素
    x=$("p").get(0);
    x=$("p").index(0);
    x=$("p").index();
个数
    x=$("p").index()
转为数组
    x=$("li").toArray()

名 内容
    $("div").text(x.nodeName + ": " + x.innerHTML);

所有元素
    $("*")
当前元素
    $(this)

举例：
1.当前元素的class为ex的父元素 缓慢隐藏
    $(this).parents(".ex").hide("slow");

2.2. 做操作

2.2.1 常用操作

获取/设置元素位置和大小

位置
    x=$("p").position();
    x.left x.top
左移
    $("div").scrollLeft(100);  
上移
    $("div").scrollTop(100);
当前偏移
    x=$("p").offset();
最近定位的祖先元素
    $("p").offsetParent()


获取/设置 元素的宽高（不包括内边距、边框或外边距）
    $("#div1").width() 
    $("#div1").height()
获取/设置 元素的宽高（包括内边距，不包括边框或外边距）
    $("#div1").innerWidth()
    $("#div1").innerHeight()
获取/设置 元素的宽度/高度（包括内边距，边框或外边距）
    $("#div1").outerHeight()
    $("#div1").outerWidth()


    $(document).width()
    $(document).height()
    $(window).width()
    $(window).height()

获取/修改元素内容

获取/设置 元素中的文本内容
    var text=$("#test").text()
    $("#test").text("Hello world!");

    origText旧的内容
    $("#test1").text(function(i,origText){  
        return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
    });
获取/设置 元素中的内容（包括标签）
    $("#test").html())
    $("#test").html("<b>Hello world!</b>")

获取/设置 表单输入值
    $("#test").val()
    $("#test3").val("Dolly Duck");

获取/设置元素属性

    $("#test").attr("href")
    $("#test").attr("href","http://www.w3school.com.cn/jquery");
    $("#w3s").attr({
      "href" : "http://www.w3school.com.cn/jquery",
      "title" : "W3School jQuery Tutorial"
    });
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery";
    });
    移除属性
    $("p").removeAttr("id");

获取/设置元素样式

是否拥有该类
    $("p:first").hasClass("intro");

// ---------方式一（常用）---------
添加样式类
     $("h1,h2,p").addClass("blue");
     $("#div1").addClass("important blue");
删除样式类
     $("h1,h2,p").removeClass("blue");
切换添加删除样式类
     $("h1,h2,p").toggleClass("blue");

// ---------方式二---------
    $("p").css("background-color");
    $("p").css({"background-color":"yellow","font-size":"200%"});

添加/删除元素

追加置结尾
    $("p").append("Some appended text.");
追加置开头
    $("p").prepend("<p>hello</p>","<p>world</p>");
    $("<b>Hello World!</b>").prependTo("p");
元素之后之前添加
    $("img").after("Some text after");
    $("img").before("Some text before");
追加hello到p元素
    $("<b>Hello World!</b>").appendTo("p");
插入内容在p元素后
    $("<span>Hello world!</span>").insertAfter("p");
插入内容在p元素前
    $("<span>Hello world!</span>").insertBefore("p");
克隆p元素
    $("p").clone()
替换
    $("p").replaceAll("<b>Hello world!</b>");
    $("p").replaceWith("<b>Hello world!</b>");
包裹p元素
    $("p").wrap("<div></div>");
    $("p").wrapAll("<div></div>");
    $("p").wrapInner("<b></b>");

删除
    $("#div1").remove();
删除所有class为italic的p元素
    $("p").remove(".italic");
删除所有子元素
    $("#div1").empty();
删除所有p元素
    $("p").detach();
删除p的所有父元素
    $("p").unwrap();

事件

绑定/解绑/切换

    绑定事件到元素
    $("button").bind("click",function(){
      $("p").slideToggle();
    });
    解绑bind
    $("p").unbind();

    给元素绑定事件
    $("div").delegate("button","click",function(){
      $("p").slideToggle();
    });
    解绑delegate
    $("body").undelegate();

    给元素绑定事件
    $("p").live("click",function(){
        $(this).slideToggle();
    });
    解绑live
    $("p").die();

    绑定事件
    $("p").one("click",function(){
    });
    
    切换绑定事件
    $("p").toggle(
      function(){},
      function(){},
      function(){}
    );
    
    触发select事件
    $("input").trigger("select");
    $("input").triggerHandler("select");

鼠标相关

    鼠标悬停时调用
    $(document).mousemove(function(e){
      鼠标的坐标
      $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
    });

    鼠标进入
    $("p").mouseenter(function(){
    });
    鼠标离开
    $("p").mouseleave(function(){
    });
    鼠标移开
    $("p").mouseout(function(){
    });
    鼠标位于上方
    $("p").mouseover(function(){
    });
    松开鼠标
    $("button").mouseup(function(){
    });

滚动
    滚动后调用
    $("div").scroll(function() {
    });
    
表单
    提交表单时调用
    $("form").submit(function(e){
    });

焦点/编辑相关

    获得焦点时调用
    $("input").focus(function(){
      $("input").css("background-color","#FFFFCC");
    });
    失去焦点时调用
    $("input").blur(function(){
      $("input").css("background-color","#D6D6FF");
    });
    内容改变后调用
    $(".field").change(function(){
      $(this).css("background-color","#FFFFCC");
    });
    选中文本后调用
    $("input").select(function(){
    });

    点击后调用
    $("button").click(function(){
      $("p").slideToggle();
    });
    $("button").click(function(e) {
      事件的类型
      $("div").html("Event: " + event.type);
      最后一次点击事件返回的内容
      $("p").html(e.result);
      触发该事件的元素
      $("div").html("Triggered by a " + event.target.nodeName + " element.");
      事件触发时的时间戳
      $("span")html(event.timeStamp);
    });
    双击后调用
    $("button").dblclick(function(){
      $("p").slideToggle();
    });
    按下键盘按钮后调用
    $("input").keydown(function(event){ 
      按键的序号
      $("div").html("Key: " + event.which);
    });
    按下并抬起键盘按钮后调用
    $("input").keypress(function(){
      $("span").text(i+=1);
    });
    抬起键盘按钮后调用
    $("input").keyup(function(){
      $("input").css("background-color","#D6D6FF");
    });

其他

    出错时调用
    $("img").error(function(){
      $("img").replaceWith("Missing image!");
    });

    $("a").click(function(event){
       阻止默认操作
       event.preventDefault();
       是否阻止了默认操作
       alert("Default prevented: " + event.isDefaultPrevented());
    });

    加载元素时调用
    $("img").load(function(){
      $("div").text("Image loaded");
    });

    文档加载完毕后调用（jQuery在此处调用）
    $(document).ready(function(){
      $(".btn1").click(function(){
        $("p").slideToggle();
      });
    });


    离开本页时调用（重新加载，关闭浏览器，前进后退，浏览器输入新url，点击链接）
    $(window).unload(function(){
      alert("Goodbye!");
    });

    浏览器窗口改变时调用
    $(window).resize(function() {
    });

其他

li元素的个数
    $("li").length
浏览器是否支持jQuery（true false）
    jQuery.support.ajax
是否禁止动画
    jQuery.fx.off = true;
改变动画帧率
    jQuery.fx.interval = 500;
jQuerry版本号
    $().jquery;

设置值
  $("div").data("key22", "Hello World");
获取值
  $("div").data("key22");
删除值
  $("div").removeData("key22");
是否存在指定值
  var $p = jQuery("p"), p = $p[0];
  jQuery.hasData(p);
队列
  div.queue("fx");
？删除队列最前端并执行
  $(this).dequeue();

停止当前操作
    $("#panel").stop();
排队函数队列
    $("#panel").queue();
下一个排队函数
    $("#panel").dequeue();
设置延迟(所有排队函数（仍未运行）)
    $("#panel").delay();

2.2.2 动画

隐藏/显示/来回切换显示隐藏

    $(this).hide();
    $("p").show();
    $("p").toggle();
    $("p").hide(1000,function(){
      alert("The paragraph is now hidden");
    });

语法：
    "slow"、"fast" 或毫秒 或空
    $(selector).hide(speed,callback);    
    $(selector).show(speed,callback);
    $(selector).toggle(speed,callback);

淡入/淡出/来回切换淡入淡出，淡出到几%

    $("#div1").fadeIn();
    $("#div1").fadeIn("slow");
    $("#div1").fadeIn(3000);
    $(selector).fadeIn(3000,function(){});

    $("#div1").fadeOut();
    $("#div1").fadeOut("slow");
    $("#div1").fadeOut(3000);
    $(selector).fadeOut(speed , callback);

    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
    $(selector).fadeToggle(speed,callback);

    $(selector).fadeTo(speed,opacity,callback);
    $("#div1").fadeTo("slow",0.15);

下滑/上滑/来回切换上下滑

    $("#panel").slideDown();
    $(selector).slideDown(speed,callback);
    
    $("#panel").slideUp();
    $(selector).slideUp(speed,callback);

    $("#panel").slideToggle();
    $(selector).slideToggle(speed,callback);

动画

必须使用 Camel 标记法书写所有的属性名
    marginRight 而不是 margin-right

CSS 属性，可选："slow"、"fast" 或毫秒，可选：回调
    操作位置前应将 position 属性设置为 relative、fixed 或 absolute！
    $(selector).animate({params},speed,callback);  
    
例：
    $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'+=150px',
        width:'150px'
    });   
    停止动画
    $("#box").clearQueue();

网站开发之jQuery篇

1. 简介

2. 使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

网站开发之HTML基础快速恢复

我爱编程

跨平台