<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

</head>

<body>

//html页面

 <ul style="position: relative;">

      <li>li1</li>

      <li class="bigFont">li2</li>

      <li>li3</li>

      <div>div</div>

      <li class="four">li4</li>

      <li><span class="a">li5</span></li>

    </ul>

     <ul>

      <li>li1</li>

      <li>li2</li>

      <li>li3</li>

    </ul>

    <h1>1</h1>

    <h1 class="five">2</h1>

    

     <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>

     <h3>选中下面的文字，看看它的颜色</h3>

     <h3>选中下面的文字，看看它的颜色</h3>

     <h3>选中下面的文字，看看它的颜色</h3>

<script type="text/javascript">

$("li").eq(1).css("color","red");                 //索引为1的li元素，即第二个li元素

$("ul li:first").html("选第一个元素");                //选第一个li

$("li:last").html("这是最后一个");                    //选最后一个li

$("ul").find(".four").css("font-size","30px");       //从ul容器里找类名为four的元素

$(".four").next().css("font-size","50px");           //选中类名为four的后一个元素

$("li:first").nextAll().css("font-size","50px");     //选中第一个li标签的后面所有元素

$(".four").prev().css("font-size","10px");           //选中类名为four的前一个元素

$(".four").prevAll().css("font-size","10px");        //选中类名为four的前面面所有元素

$(".four").parent().css("background","blueviolet");     //选中类名为four的父元素标签，

$(".a").parents().css("background","indianred");     //选中的是类名为a的祖先标签，整个html的颜色都会变化,

$(".a").offsetParent().css("background","yellow");      //最近定位的祖先元素                    //

$("h1").siblings().css("font-size","50px");       //和h1同一个级别的标签都会被选中

$("ul").children(".four").text();                 //ul下面的子元素，类名为four的被选中

$("h1").val();                                 //取h1标签对应的文本值，这个方法只能无参

$("h1").html();                                //取h1标签对应的文本值，无参取值

$("h1").html("123");                           //为h1标签赋值，有参赋值

$("h1").text();                                //取h1标签对应的文本值，无参取值

　 html()和text()和val()三者区别

　　　val()方法是取值，无参时，效果和html()一样，有参时可以为input框赋值，其他标签好像赋不了

　　　html()方法取值， $("p").nextAll("h3").html();控制台打印只会取第一个h3的值

　　　text()方法取值， $("p").nextAll("h3").html();控制台打印只会取三个h3的值

　　　如果是带参的html("aaa")和text("aaa")效果一样

</script>

</body>

</html>

Jquery元素筛选、html()和text()和val三者区别的更多相关文章

  1. jquery中的html()、text()、val()的区别

      1.html(),text(),val()三种方法都是用来读取选定元素的内容: html()是用来读取元素的HTML内容(包括其Html标签),text()用来读取元素的纯文本内容,包括其后代元素 ...

  2. jQuery学习之------html()、text()和val()

    jQuery学习之------html().text()和val() .html(),.text()和.val()的差异总结:  (来源:慕课网) .html(),.text(),.val()三种方法 ...

  3. jquery中html()、text()、val()的区别与使用

    .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. .html(),.text(),.val()三种方法都 ...

  4. jQuery中的text(),html(),val()的区别

    一.jquery中HTML 1. 无参html() 方法用来获取任意元素的HTML内容,如果你调用多个选定元素的.html()方法,那么其读取的只是第一个元素,换句话说:如果选择器匹配多于一个的元素, ...

  5. jquery中html()、text()、val()的区别

     (2013-03-26 10:49:16) 转载▼ 分类: jquery   .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改 ...

  6. JQuery中text(),html(),val()的区别

    这3个都是jquery类库中的语法,分别是: text():获取或者改变指定元素的文本: html():获取或改变指定元素的html元素以及文本: val():获取或者改变指定元素的value值(一般 ...

  7. 关于jquery中html()、text()、val()的区别

    1. .html()用为读取和修改元素的HTML标签    对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读 ...

  8. [转]关于jquery中html()、text()、val()的区别

    原文地址:http://www.cnblogs.com/xiaolifeidao/p/3715830.html .html()用为读取和修改元素的HTML标签    对应js中的innerHTML . ...

  9. 我的JQuery复习笔记之①——text(),html(),val()的区别

    text():①可匹配多个元素 ②过滤其中的标签(只显示文字) ③只适用于双标签 html():①只匹配选中元素中的第一个 ②不过滤其中标签 ③只适用于双标签 val():①只匹配选中元素中的第一个 ...

随机推荐

  1. 运营商如何关闭2G、3G网络？这事儿得从小灵通说起

    5G时代即将全面开启,主流声音是对未来的无限畅想--5G将带来翻天覆地的变化.不过凡事都有利弊两面性,5G作为新生事物固然大有可为,但不可避免地会对旧事物造成巨大冲击.除了会影响很多跟不上潮流发展的行 ...

  2. NFS网络文件共享系统！

    NFS是运行在应用层上的协议,其默认的端口为2049,它适用于linux与linux之间,也适用于linux与unix之间,亦可适用于linux与windows之间 nfs优缺点优点 节省本地硬盘的存 ...

  3. 「AHOI2014/JSOI2014」宅男计划

    「AHOI2014/JSOI2014」宅男计划 传送门 我们首先要发现一个性质:存货天数随买食物的次数的变化类似于单峰函数. 具体证明不会啊,好像是二分加三分来证明?但是没有找到明确的严格证明. 感性 ...

  4. Java自学-集合框架 ArrayList和HashSet的区别

    Java ArrayList和HashSet的区别 示例 1 : 是否有顺序 ArrayList: 有顺序 HashSet: 无顺序 HashSet的具体顺序,既不是按照插入顺序,也不是按照hashc ...

  5. Python3.5学习之旅——day5

    模块初识 一.定义 在python中,模块是用来实现某一特定功能的代码集合.其本质上就是以‘.py’结尾的python文件.例如某文件名为test.py,则模块名为test. 二.导入方法 我们在这一 ...

  6. 06. Z字型变换

    题目: 提交01: class Solution { public String convert(String s, int numRows) { int length = 2*numRows-2; ...

  7. Python基础-3 输入输出

    输入输出 input输入函数 input函数:获取用户输入,保存成一个字符串.重要的话,说两遍,input函数的返回值是一个字符串类型.哪怕你输入的是个数字1,返回给你的只会是字符串"1&q ...

  8. LeetCode 24. Swap Nodes in Pairs（交换链表中每两个相邻节点）

    题意:交换链表中每两个相邻节点,不能修改节点的val值. 分析:递归.如果以第三个结点为头结点的链表已经两两交换完毕(这一步递归实现---swapPairs(head -> next -> ...

  9. Windows程序设计学习笔记(1):一个简单的windows程序

    <Windows程序设计>(第五版)(美Charles Petzold著) #include<windows.h> LRESULT CALLBACK WndProc(HWND, ...

  10. 第1节 Scala基础语法：1、2、概述，什么是scala

    Scala编程 1.    课程目标 1.1.  目标1:熟练使用scala编写Spark程序 1.2.  目标2:动手编写一个简易版的Spark通信框架 1.3.  目标3:为阅读Spark内核源码 ...