<!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. leetcode 0208

    目录 ✅ 108. 将有序数组转换为二叉搜索树 描述 解答 py [tdo rev 0208]py知识:if not x: 和if x is not None:和if not x is None:使用 ...

  2. Update(Stage5)：Kudu入门_项目介绍_ CDH搭建

    Kudu 导读 什么是 Kudu 操作 Kudu 如何设计 Kudu 的表 Table of Contents 1. 什么是 Kudu 1.1. Kudu 的应用场景 1.2. Kudu 和其它存储工 ...

  3. 【PAT甲级】1067 Sort with Swap(0, i) (25 分)

    题意: 输入一个正整数N(<=100000),接着输入N个正整数(0~N-1的排列).每次操作可以将0和另一个数的位置进行交换,输出最少操作次数使得排列为升序. AAAAAccepted cod ...

  4. linux mysql 查看数据库大小

    SELECT CONCAT(TRUNCATE(SUM(data_length)//,),'MB') AS data_size, CONCAT(TRUNCATE(SUM(max_data_length) ...

  5. django 模版标签笔记

    一.模板变量笔记:1.在模版中使用变量,需要将变量放到‘{{}}’中.'{{ 变量 }}'2.如果想访问对象的属性,可以通过'对象.属性名'的方式访问3.如果想要访问一个字典的key对应的value, ...

  6. hutoolJava工具类的使用

    前言 安装 友情开源项目 Hutool相关博客(软文) 捐赠使用公开 核心(Hutool-core) 克隆 支持泛型的克隆接口和克隆类 类型转换 类型转换工具类-Convert 自定义类型转换-Con ...

  7. Python 爬取 热词并进行分类数据分析-[JSP演示+页面跳转]

    日期:2020.02.03 博客期:142 星期一 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[拓扑 ...

  8. spring boot ApplicationRunner使用

    spring boot ApplicationRunner使用 它的使用比较简单,实现ApplicationRunner的run方法 package com.hikvision.pbg.jc.conf ...

  9. Android之Builder对话框的一些常用方式

    原文: http://blog.csdn.net/kkfdsa132/article/details/6322835 Android为我们提供几种对话框,主要有:AlertDialog.Progres ...

  10. 用Hyper-v 在win10下使用Docker-Desktop体验kubernetes

    首先开启Hyper-v ,会自动创建一个交换机. 开启internet共享,自动创建的那个交换机(虚拟的网络适配器)会分配一个默认的IP 192.168.137.1,这个IP你不爽,就用注册表搜索并修 ...