JQuery基础知识梳理篇

2023-08-14 21:41:52

这周没事，优化线上项目，因为前端都在赶项目，我又若菜。于是前端数据展示也要自己来。看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"); //返回不带有类名的所有
  
  元素

posted @
2016-08-27 11:29
罗茜
阅读(...)
评论(...)
编辑
收藏

码农公寓

的所有同胞元素 $("h2").siblings("p"); //返回

同胞元素中的所有

的下一个同胞(右兄弟)

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

与

之间的所有的同胞元素

相关文章

的所有同胞元素

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