【jquery】从javascript过渡的基础学习

---恢复内容开始---

jquery是一个快速，剪辑的javascript的框架。

封装了常用javascript的功能代码，提供一种简便的javascript设计模式，优化html文档操作，动画设计，ajax交互。

1.入门解析

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

第一部分：“$(document).ready()的个人理解，是指页面在一定的数据框架加载完成后执行的操作。

第二部分：

function(){
$("button").click(function(){
$("p").hide();
});
}

取到button，并渠道p标签，进行hide（）；

2.语法实例

jQuery 语法实例

$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

$("")是获取dom的方式，比javascript中的方法要简便了许多。

$(this)为之前引用的元素，为$("button").click()中的button元素。

$("p.text")为获取p中text类的标签还有$("p#text")为获取p标签中text为id的标签

$("ul li:first")选取第一个ul的第一个li

$("ul li:first-child")选取每一个ul的第一个li元素

$("a[target='_blank']")选取target为_blank的a元素

$(":button")选取type="button"的元素，input或者button

$("tr:even")选取表格中的偶数位置的tr元素，0算偶数然后表格的位置从0开始。

$(“tr.odd”)选取表格中的奇数位置的tr元素

 

 3.关于jquery

jquery是为事件处理特别设计的，页面对不同访问者的响应叫做事件。

 

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

 表单事件等可以选择触发的元素。

例如:$(selector).submit()这里出发submit事件

$(selector).submit(function)这里添加函数到submit事件之中

 4.jquery的效果

（1）隐藏与显示效果

对选中的标签进行show(),hide();

可以设置callback的数值来达到延迟的效果

如：$("p").hide(1000);1000毫秒等于1秒，这样可以带有延迟的效果

另外利用toggle可以达到 隐藏/显示的效果，同样可以在括号中添加延迟的效果

（2）淡出淡入的效果

fadeIn() fadeOut() fadeJoggle() 可以添加参数 "slow"或者毫秒来设置速度

另外fadeTo() 有三个参数，第一个是速度，第二个是透明度（例如：0.9），第三个是可选的速度

（3）下滑效果

同理使用：slideUp(),slideDown(),slideToggle()

（4）动画效果（animate函数）

$(selector).animate({params},speed,callback);

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

{params}用于css等属性的设置,比如长宽高颜色 (opacity 透明度等等)

这个{}中用，隔开

另外可以定义相对值，比如说 height:'+=120px'

可以把height等等的属性改成 toggle。

animate是有队列功能的，比如说

div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow");

这个语句会先右移动，然后再放大字体。

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

利用这个方法，可以让动画进行完，再继续。

 

（5）动画链

链可以让许多的jQuery方法同时作用在同一个元素上。

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

这个id为p1的元素会先变成红色，然后通过滑动隐藏，再通过滑动显示

 

（6）jquery的html操作

（1）获取内容

三个简单实用的用于 DOM 操作的 jQuery 方法：

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

html()与text()的区别，val()则被用于获取values。

（2）获取属性

attr()用于获取属性值

比如说：

$("button").click(function(){ alert($("#runoob").attr("href")); });

如果用于改变，则直接再函数中改变。比如说text("hello world")相当于赋值

（3）添加元素

  • append() - 在被选元素的结尾插入内容：$("p").append(" <b>追加文本</b>。");
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

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

（4）删除元素

$("#div1").remove();    $("p").remove(".italic");//过滤删除italic类的p标签

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

 

(5)获取并设置css

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

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

$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });

（6）

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

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

 7.jquery的遍历

根据标签父子关系来遍历

 

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

  • parent()   //返回上级的标签
  • parents()  //一路返回上级标签，直到html标签
  • parentsUntil() // $("span").parentsUtil("ul"); 用于给与介于span 与ul之间的父标签

  $("span").parents("ul");可以用于过滤，这样只筛选为ul的父标签

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

  • children()  //$("div").children(); 返回div的所有子标签，并可以筛选$("div").children("p.1");
  • find()　//$(document).ready(function(){ $("div").find("span"); }); 寻找后代中所有的span标签
  • $(document).ready(function(){ $("div").find("*"); }); 返回所有的后代

 

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

  • siblings() //$(document).ready(function(){ $("h2").siblings(); }); 不包括自己，同时可以筛选
  • next() //返回下一个同胞元素
  • nextAll() //$(document).ready(function(){ $("h2").nextAll(); }); 返回所有跟随的同胞
  • nextUntil() //$(document).ready(function(){ $("h2").nextUntil("h6"); }); 从跟随的标签中需按照这个范围中满足条件的标签
  • prev()  //同样只是向上跟随
  • prevAll()
  • prevUntil()

 遍历过滤：first(),last(),eq()

$("div p").first(); //div中第一个p

$("div p").last();//div中最后一个p

 $("p").eq(1);  //寻找所有p中的第1个，从0个开始

  $("p").filter(".url"); 会过滤掉是url类的标签

$("p").not(".url"); 与url相反的标签

8.ajax

什么是ajax？是异步的javascript与xml

在不重载整个网页的情况下，通过后台加载数据，并在网页上显示

比如说：谷歌地图，还有微博等等

1.load函数

这是示例文件（"demo_test.txt"）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2> <p id="p1">这是段落的一些文本。</p>
 

$("#div1").load("demo_test.txt");   直接通过load函数进行填充txt

$("#div1").load("demo_test.txt #p1"); 填入txt中指定的id到div中

function(responseTxt,statusTxt,xhr){

if(statusTxt=="success") alert("外部内容加载成功!");

if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });

2.ajax的get()与post()方法

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

$.get("demo_test.php",function(data,status){

alert("数据: " + data + "\n状态: " + status); }); });

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

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

 

posted @ 2018-03-07 00:16  脏脏的毛毛  阅读(121)  评论(0)    收藏  举报