JQuery基础知识梳理篇

这周没事，优化线上项目，因为前端都在赶项目，我又若菜。于是前端数据展示也要自己来。看javascript看到吐，决定梳理一下Jquery基础知识。敲黑板) 闲扯结束，进入正题。

选择器

介绍

jquery可以通过元素选择器和属性选择器通过签名，属性名或者内容对html元素进行选择

元素选择器

使用css选择器来选取html元素

$("p") //选取
元素

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

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

属性选择器

使用xPath表达式来选择带有给定属性的元素

$("[href]") //选取所有带有href属性的元素

$("[href='#']") //选取所有带有href属性等于"#"的元素

$("[href!='#']") //选取所有带有href属性不等于"#"的元素

$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素。

css选择器

css选择器可用于改变html元素的css属性

$("p").css("background-color", "red"); //把所有的p元素的背景颜色改为红色

其他选择器

$(this)		//当前html元素

$(".intro")		//所有class="intro"的元素

$("#intro")		//所有id="intro"的元素

$("ui li:first")		//每个<ul>的第一个<li>元素

$("div#intro .head")	//id="intro"的<div>元素中的所有class="head"的元素

事件

介绍

为事件处理特别设计的，jquery事件处理方法是jquery中的核心函数
事件处理器指的是当html中发生某些事件时所调用的方法

语法

$("button").click(function() {..some code... } )
为了jquery函数易于维护，可以把jquery函数放到独立的xxx.js文件中

引用:

      <head>

        <script type="text/javascript" src="xxx.js"></script>

        </head>

JQuery事件

$(document).ready (function) //文档完成加载后，触发事件
$(selector).click (function) //触发或者将函数绑定到被选元素的点击事件
$(selector).dblclick (function) //触发或者将函数绑定到被选元素的双击事件
$(selector).mouseover (function) //触发或者将函数绑定到被选元素的鼠标悬停事件

HTML

获取，设置

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

没有设置值为获取选择器内容, 有设置值为获取选择器内容

创建元素

// 创建Text. 字符串

var txt = "<p>Text.</p>";	// html创建新元素

var txt = $("<p></p>").text("Text.");	//jQuery创建新元素

var txt = document。createElement("p");	//DOM创建新元素

添加

$(选择器).append(添加内容) -- 在选择器结尾(标签内部)插入内容可添加多个
$(选择器).prepend(添加内容) -- 在选择器开头(标签内部)插入内容可添加多个
$(选择器).after(添加内容) -- 在被选元素之后(标签外部)插入内容可添加多个
$(选择器).before(添加内容) -- 在被选元素之前(标签外部)插入内容可添加多个

删除元素

remove() - 删除被选元素(包括子元素)

实例:

      <head>

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

      <script>

      $(document).ready(function(){

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

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

        });

      });

      </script>

      </head>

      <body>

      <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

      This is some text in the div.

      <p>This is a paragraph in the div.</p>

      <p>This is another paragraph in the div.</p>

      </div>

      <br>

      <button>删除 div 元素</button>

      </body>

      <!--点击按钮，触发时间，删除指定的div及其子元素-->

hint: remove()方法可以接受一个参数，允许你对被删除元素进行过滤

      <head>

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

      <script>

      $(document).ready(function(){

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

          $("p").remove(".italic");

        });

      });

      </script>

      </head>

      <body>

      <p>This is a paragraph in the div.</p>

      <p class="italic"><i>This is another paragraph in the div.</i></p>

      <p class="italic"><i>This is another paragraph in the div.</i></p>

      <button>删除 class="italic" 的所有 p 元素</button>

      </body>

      <!--删除例子中class="italic"的所有<p>元素 -->

empty() - 删除被选中元素的子元素

实例:

      <head>

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

      <script>

      $(document).ready(function(){

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

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

        });

      });

      </script>

      </head>

      <body>

      <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

      This is some text in the div.

      <p>This is a paragraph in the div.</p>

      <p>This is another paragraph in the div.</p>

      </div>

      <br>

      <button>清空 div 元素</button>

      </body>

点击按钮，清空指定div中的字体内容，但是div模块依然存在

JQuery 遍历

遍历(移动):

用于根据相对其他元素的关系来查找html元素, 以摸一个选择开始，并沿着这个选择移动，知道抵达期望的元素为止。
例子: 如在一个家族树上，通过jQuery遍历，你可以从当前元素，向上，向下，水平移动，从而到达期望的位置，又称DOM遍历。

祖先

parent(): 返回被选元素的直接父元素

$("span").parent(); //返回元素的直接祖先
parents(): 返回被选中元素的所有祖先元素

$("span").parents(); //返回元素的所有祖先
parentsUntil(): 返回介于两个给定元素之间的所有祖先元素

$("span").parentsUntil("div"); //返回span的祖先并且是div的儿子的元素

后代

children(): 返回被选元素的所有直接子元素

$("div").children(); //返回
标签的所有直接子元素

$("div").children("p.1"); //对
标签的所有直接子元素进行过滤，返回类名为1的
元素
find(): 返回被选中元素的所有后代元素，直到最后一个后代

$("div").find("span"); //返回
后代的所有元素

$("div").find("*"); //返回
元素的所有后代

同胞

siblings(): 返回被选中元素的所有同胞元素

$("h2").siblings(); //返回

的所有同胞元素

$("h2").siblings("p"); //返回

同胞元素中的所有
元素(过滤)
next(): 返回被选中元素的下一个同胞元素

$("h2").next(); //返回

的下一个同胞(右兄弟)
nextAll(): 返回被选元素所有跟随的同胞元素

$("h2").nextAll(); //递归返回

的所有下一个同胞(右兄弟)
nextUntil(): 返回介于两个参数之间的所有跟随同胞元素

$("h2").nextUntil("h6"); //返回

与

之间的所有的同胞元素
prev(), preAll(), prevUntil()方法与nextXXX相反，相对应取指定元素的左兄弟

过滤

first(): 返回被选中元素的首个元素

$("div p").first(); //返回首个
元素内部的第一个
元素
last(): 返回被选元素的最后一个元素

$("div p").last(); //返回最后一个
元素内部的最后一个
元素
eq(): 返回被选元素中带有指定引索号的元素(引索号从0开始)

$("p").eq(1); //选取第二个
元素
filter(): 返回符合指定匹配标准的元素

$("p").filter(".intro"); //返回带有类名intro的所有
元素
not(): 返回不匹配标准的所有元素

$("p").not(".intro"); //返回不带有类名的所有
元素

AJAX:

定义

与服务器交换数据的艺术，在不重载页面的情况下实现对部分网页的更新 (异步JavaScript + XML)

通过jQuery AJAX方法，可以实现http get/post从远程服务器上请求文本，html，xml，json。同时把这些外部数据直接载入网页的被选中元素中

jQuery - Ajax方法

jQuery load()

从服务器加载数据，并把返回的数据放入被选中的元素中
语法: $(selector).load(URL(需要加载的url), data(请求的信息), callback(返回执行的函数名));
callback参数设置: responseTxt -- 包含调用成功时的结果内容，statusTXT -- 调用状态， xhr -- 包含XMLHttpRequest对象
范例:

demo_test.txt:

    <h2>jQuery and AJAX is FUN!!!</h2>

    <p id="p1">This is some text in a paragraph.</p>

    <head>

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

    </script>

    <script>

    $(document).ready(function(){

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

        $('#test').load('/example/jquery/demo_test.txt');

      })

    })

    </script>

    </head>

    <body>

    <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>

    <button id="btn1" type="button">获得外部的内容</button>

    </body>

点击button后，会获取demo_test内容，替换原来test文本

get()

get() - 从指定的资源请求数据
语法: $get (URL, callback);
范例:

      <head>

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

      <script>

      $(document).ready(function(){

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

          $.get("/example/jquery/demo_test.asp",function(data,status){

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

          });

        });

      });

      </script>

      </head>

      <body>

      <button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>

      </body>

向/example/jquery/demo_test.asp请求数据，回调函数返回数据以及状态

post()

post() - 向指定的资源提交要处理的数据
语法: $.post(URL, data, callback); (请求链接，提交数据，请求成功后所返回的函数名)
范例:

      <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>

向链接/example/jquery/demo_test_post.asp发送(name,city)内容，回调函数参数求情页面内容，请求状态。

JQuery基础知识梳理篇

的所有同胞元素

$("h2").siblings("p"); //返回

同胞元素中的所有
元素(过滤)

的下一个同胞(右兄弟)

的所有下一个同胞(右兄弟)

与

之间的所有的同胞元素