javascript基础之 jQuery教程

2023-03-06 15:00:33

1，jQuery是js的一个库

基本功能：

　　HTML元素获取和操作，html事件操作。

　　css操作。

　　js特效和动画

　　DOM遍历和修改

　　ajax

　　Utilities

特性：

　　js2以上的版本不支持ie678浏览器。如果要兼容ie678，请选择jq1.9

2，jquery基本格式

<head>

<meta charset="utf-8">

<title>index.php</title>

<script src="./jquery-3.3.1.min.js">    //导入jquery包

</script>

<script>    //代码写在script中

$(document).ready(function(){    //页面加载完成后执行以下函数

  $("p").click(function(){    //通过html元素的名字获取元素：$("元素名字")

    $(this).hide();    //注意this。this代表的是click的那个元素

  });

});

</script>

</head>

<body>

<p>如果你点我，我就会消失。</p>

<p>继续点我!</p>

<p>接着点我!</p>

</body>

3，使用

　　1，自己下载production版本（成品）或者development版本（用于测试开发），放在本地引用。

　　2，通过内容分发网络引用

//本地引用的格式

<head>

<script src="jquery-1.10.2.min.js"></script>

</head>

//网络分发，引用在线的库，以百度为例

<head>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

</script>

</head>

4，语法

　　$(selector).action()

实例：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素，class用点，这和css一样

$("#test").hide() - 隐藏所有 id="test" 的元素，id用井号，这和css也一样

$(document).ready(function(){xxx代码}); - 文档就绪以后执行，简写为：$(function(){xxx代码});；

5，选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

实例：

$(document).ready(function(){

  $("button").click(function(){    //获取button，定义它的一个点击事件

    $("p").hide();    //获取所有的p元素，执行隐藏事件

  });

});
//其他获取元素的方式：
$("#test").hide();    //获取id等于test的元素，执行隐藏事件
$(".test").hide();    //获取class等于test的元素，执行隐藏事件
$("*")    //获取所有元素
$(this)    //获取当前的html元素
$("p:first")    //获取第一个p元素
$("[href]")    //选取带有href属性的元素

6，jquery事件

页面对不同访问者的响应叫做事件。事件常用术语：触发，常见的dom事件如下：

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

实例：

//click()    单击某个段落的时候执行隐藏自己

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

  $(this).hide();

});

//dblclick()    双击元素的时候执行某个事件

$("p").dblclick(function(){

  $(this).hide();

});

//mouseenter()    鼠标移入元素时候，发生mouseenter事件

$("#p1").mouseenter(function(){

    alert('您的鼠标移到了 id="p1" 的元素上!');

});

//mouseleave()    鼠标离开元素的时候发生的事件

$("#p1").mouseleave(function(){

    alert("再见，您的鼠标离开了该段落。");

});

//mousedown()    鼠标不仅仅在段落上，并且按下的瞬间，执行某函数

$("#p1").mousedown(function(){

    alert("鼠标在该段落上按下！");

});

//mouseup()    鼠标不仅仅在段落上，按下然后松开的瞬间执行的事件

$("#p1").mouseup(function(){

    alert("鼠标在段落上松开。");

});

//hover()模拟光标悬停事件，定义两个函数，当鼠标移动到元素上的时候，会触发第一个函数，鼠标离开的时候执行第二个
$("#p1").hover( 
　　function(){ 
　　　　alert("你进入了 p1!"); 
　　}, 
　　function(){ 
　　　　alert("拜拜! 现在你离开了 p1!"); 
} );

//focus()  获得焦点的时候发生focus事件，
$("input").foucs(function(){    //实例是，当鼠标点到文本框里去的时候，文本框的背景变色
　　$(this).css("backgroud_color","#ccccc");    //注意一下css如何操控
})

//blur当元素失去焦点的时候发生blur事件，常常和foucs事件一块使用
$("input").blur(function(){    //当鼠标从文本框中离开的时候执行
　　$(this).css("background-color","#ffffff")
});

7，jq效果

　　1，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。实例不多说。但是要注意他们的附带参数：

$(document).ready(function(){

  $(".hidebtn").click(function(){    //class等于hidebtn的元素点击的时候发生一个事件

    $("div").hide(1000,function(){    //这个事件是让div在1秒时间中缓缓消失，然后调用一个函数，官方名字叫回调函数

      alert("Hide() 方法已完成!");

    });

  });

});

//语法：$(selector).hide(speed,callback);

　　2，toggle()函数，相当于hide和show的集合体，点击以后出现或者消失

//用法

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

  $("p").toggle();

});

　　3,淡入淡出元素（fadeIn()，fadeOut()用法基本一样）

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

  $("#div2").fadeIn();    //淡入

  $("#div3").fadeIn(3000);    //带事件参数的淡入，三秒内淡入

});

　　4，淡入淡出之间进行替换：fadeToggle()

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

   $("#div1").fadeToggle();

   $("#div3").fadeToggle(3000);

});

//格式：$(selector).fadeToggle(speed,callback);

　　5，变到一定的透明度，fadeTo()

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

  $("#div1").fadeTo("slow",0.15);

});

//$(selector).fadeTo(speed,opacity,callback);opacity:透明度，介于0和1

　　6，滑动slideDown()和slideUp()

$("#flip").click(function(){

  $("#panel").slideDown();

});

//$(selector).slideDown(speed,callback);

//滑动的意思是向下滑动并且出现

　　7，点击滑动出现或者消失slideToggle() 方法，也就是可以在 slideDown() 与 slideUp() 方法之间进行切换。

格式：$(selector).slideToggle(speed,callback);

　　8，jQuery animate() 方法用于创建自定义动画

格式：$(selector).animate({params},speed,callback); //params指的是css的属性;speed可以说fast或者slow

//例1
$("button").click(function(){

  $("div").animate({left:'250px'});

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

//html的position属性为relative，fixed或者abslote

注意：params中不能操纵css的颜色，写法也需要改成没有短横的那种：padding-left改成paddingLeft。有些元素还可以使用相对值，如：$("div").animate({ left:'250px',height:'+150px'});

　　9，stop()方法，用于在动画效果停止前，让它静止

语法：$(selector).stop(stopAll,goToEnd);

　　10，Callback()方法，就是执行完前面的函数（包括动画或者动作）以后，执行回调函数

　　11.链，意思是它允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

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

8，jquery dom设置内容或者属性

DOM = Document Object Model（文档对象模型）

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

获取dom内容或者属性实例：

$("#btn1").click(function(){

  alert("Text: " + $("#test").text());    //text是某元素的内容，就是document中的innerHTML

});

$("#btn2").click(function(){

  alert("HTML: " + $("#test").html());    //html的意思是获取这个元素的内容加htnl标识，类似于<p>这样的

});

$("#btn1").click(function(){

  alert("值为: " + $("#test").val());    //获取id等于test的文本框的输入，相当于原版写法里的.value

});
$("button").click(function(){ 
  alert($("#runoob").attr("href"));     //获取id等于runoob的href属性
});

修改dom内容或者属性实例：

$("#btn1").click(function(){

    $("#test1").text("Hello world!");    //改HTML

});

$("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");    //改html

});

$("#btn3").click(function(){

    $("#test3").val("RUNOOB");    //改value

});
$("button").click(function(){ 
    $("#runoob").attr("href","http://www.runoob.com/jquery");  //把元素的href属性设置为新的网址
});

为dom方法设置回调函数，

回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

实例：

$("#btn1").click(function(){

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

        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";

    });

});

//注意，这个origText应该指代的是旧文本

$("#btn2").click(function(){

    $("#test2").html(function(i,origText){

        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";

    });

});

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

9，jq 添加元素

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

$("p").append("追加文本");    //在p后面追加文本,注意，像列表序号标识这样的信息，需要同时写入到append的括号里去，比如$("ol").append("<li>追加列表项</li>")

$("p").prepend("在开头追加文本");    //在开头追加文本

//*三种方式创建html元素

function appendText(){

    var txt1="<p>文本。</p>";              // 使用 HTML 标签直接创建文本

    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本，因为p元素还没有创建，所以不能使用$(')

    var txt3=document.createElement("p");

    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

    $("body").append(txt1,txt2,txt3);        // 追加新元素

}

$("img").after("在后面添加文本");    //在选中的元素之前添加文本

$("img").before("<p>在前面添加文本</p>");    //在选中的元素之后添加文本,注意，带上html元素标签比较好

10，jq删除元素

remove() - 删除被选元素（及其子元素）：$("#div1").remove();
empty() - 从被选元素中删除子元素：$("#div1").empty(); //子元素被移除以后div大小又可能变化
选择性删除：$("p").remove(".italic"); //class=italic的所有的p元素

11，jq对元素的css操作

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

//addClass()方法

$("h1,h2,p").addClass("blue");    //为好几个元素新加上一个class=blue的属性，这样，css表中的blue的样式h1,h2,p也会具有

$("div").addClass("important blue");    //可以一次性添加多个元素和多个种类

//removeClass()方法

$("h1,h2,p").removeClass("blue");    //给某个或者某些元素删除它的一个class属性

//toggleClass() 方法

$("h1,h2,p").toggleClass("blue");    //如果元素具有class=xxx的属性，那就删除，如果没有，那就给它附上

12，jq对css的操作

　　实例

//获取某元素的css的背景颜色属性

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

//修改某元素的背景颜色属性

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

//设置多个css属性

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

//请注意格式：1大括号，2引号冒号  3逗号

13.jq处理元素和浏览器窗口的尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

//width()和height()，不包括内边距、边框或外边距

$("#div1").width()    //id=div1的宽度，单位是px

$("#div1").height();

//innerWith()和innerHeight() 包括内边距

$("#div1").innerWidth()

$("#div1").innerHeight()

//outerWidth()和outerHeight() 包括内边距和边框

$("#div1").outerWidth()

$("#div1").outerHeight()

14 jq元素的遍历

父元素:(向上遍历)

parent() // $("span").parent()单指span上一级的父元素
parents() //$("span").parents()返回span元素所有的祖先，像这样单选某个祖先也是可以的$("span").parents("ul")
parentsUntil() //$("span").parentsUntil("div")parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

子元素：（向下遍历）

children() //$("div").children()返回下一级的dom树
find() //返回所有的后代元素：$("div").find("*"); 返回后代所有的span元素：$("div").find("span");

水平遍历：

siblings() //返回被选元素的同胞元素。$("h2").siblings().css({"color":"red","border":"2px solid red"});让h2的同胞更改一些css属性，并不包括h2
next() //返回被选元素的下一个同胞元素
nextAll() //nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() //nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev() //返回被选元素的前一个同胞元素
prevAll() //返回被选元素前面所有的同胞元素
prevUntil() //返回介于两个给定参数之间的所有跟随的同胞元素

过滤：

　　first() //$("div p").first().css("background-color","yellow"); 选取div下的第一个p

　　last（） //选取div下最后一个p

　　eq() //按照索引号选取，$("p").eq(1)为所有的p元素编号，选取第二个（从0开始）

　　filter（） //选取符合某个标准的某些元素 $("p").filter(".url");选取class=url的所有的p元素

　　not() //方法与 filter() 相反。选取不带有某个属性的那些某元素

码农公寓