jQuery-样式操作

  .css()

    可以直接使用来获取css的值

    .css("color")

      使用方法,如果想给查找到的标签添加样式:

    .css("color", "red")

    如果一个样式具有多个要添加的属性:

    css("border", "solid 1px green")

     如果想要给一个标签添加多个样式的话:

    .css({"color": "red", "font-size": "36px"})

  位置相关

    获取匹配元素在当前视口的相对偏移:

      offset()    可以用来获取也可以用来设置

    获取匹配元素相对父元素的偏移:
                position()   只能获取

  返回顶部

1. scrollTop()         --> 获取窗口滚动距离
                
                2. $(window).scroll()  --> 滚动触发

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部示例</title> <style>
.c1 {
height: 50px;
} .b1 {
position: fixed;
right: 10px;
bottom: 10px;
} .hide {
display: none;
}
</style>
</head>
<body> <div class="c1">001</div>
<div class="c1">002</div>
<div class="c1">003</div>
<div class="c1">004</div>
<div class="c1">005</div>
<div class="c1">006</div>
<div class="c1">007</div>
<div class="c1">008</div>
<div class="c1">009</div>
<div class="c1">010</div>
<div class="c1">011</div>
<div class="c1">012</div>
<div class="c1">013</div>
<div class="c1">014</div>
<div class="c1">015</div>
<div class="c1">016</div>
<div class="c1">017</div>
<div class="c1">018</div>
<div class="c1">019</div>
<div class="c1">020</div>
<div class="c1">021</div>
<div class="c1">022</div>
<div class="c1">023</div>
<div class="c1">024</div>
<div class="c1">025</div>
<div class="c1">026</div>
<div class="c1">027</div>
<div class="c1">028</div>
<div class="c1">029</div>
<div class="c1">030</div>
<div class="c1">031</div>
<div class="c1">032</div>
<div class="c1">033</div>
<div class="c1">034</div>
<div class="c1">035</div>
<div class="c1">036</div>
<div class="c1">037</div>
<div class="c1">038</div>
<div class="c1">039</div>
<div class="c1">040</div>
<div class="c1">041</div>
<div class="c1">042</div>
<div class="c1">043</div>
<div class="c1">044</div>
<div class="c1">045</div>
<div class="c1">046</div>
<div class="c1">047</div>
<div class="c1">048</div>
<div class="c1">049</div>
<div class="c1">050</div>
<div class="c1">051</div>
<div class="c1">052</div>
<div class="c1">053</div>
<div class="c1">054</div>
<div class="c1">055</div>
<div class="c1">056</div>
<div class="c1">057</div>
<div class="c1">058</div>
<div class="c1">059</div>
<div class="c1">060</div>
<div class="c1">061</div>
<div class="c1">062</div>
<div class="c1">063</div>
<div class="c1">064</div>
<div class="c1">065</div>
<div class="c1">066</div>
<div class="c1">067</div>
<div class="c1">068</div>
<div class="c1">069</div>
<div class="c1">070</div>
<div class="c1">071</div>
<div class="c1">072</div>
<div class="c1">073</div>
<div class="c1">074</div>
<div class="c1">075</div>
<div class="c1">076</div>
<div class="c1">077</div>
<div class="c1">078</div>
<div class="c1">079</div>
<div class="c1">080</div>
<div class="c1">081</div>
<div class="c1">082</div>
<div class="c1">083</div>
<div class="c1">084</div>
<div class="c1">085</div>
<div class="c1">086</div>
<div class="c1">087</div>
<div class="c1">088</div>
<div class="c1">089</div>
<div class="c1">090</div>
<div class="c1">091</div>
<div class="c1">092</div>
<div class="c1">093</div>
<div class="c1">094</div>
<div class="c1">095</div>
<div class="c1">096</div>
<div class="c1">097</div>
<div class="c1">098</div>
<div class="c1">099</div>
<div class="c1">100</div> <button class="b1 hide" onclick="up();">返回顶部</button> <script src="jquery-3.2.1.min.js"></script>
<script>
// m滚动条每一次滚动的时候,都要作判断
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".b1").removeClass("hide");
} else {
$(".b1").addClass("hide");
}
});
function up() {
$(window).scrollTop(0);
}
</script>
</body>
</html>

返回顶部实例

  尺寸

height        本身
               width
            
               innerHeight   本身加padding
               innerWdth
            
               outerHeight    本身+paddding + border
               outerWidth

    具体要注意盒子的设计规则

jQuery-文本操作

    text()

   获取文本 --> 我的和我孩子们的        

html()

   获取标签  --> 所有HTMl内容        

val()

  input框的值
              select          --> value
              multipleselect --> value值的数组

    要注意的是.text获取的是自己的和自己所包含的子元素的所有文本

jQuery-属性操作

    prop()

  适用于checkbox和radio
                  返回值是true或false

attr()

  获取其他属性或自定义属性
                  $("img").attr("src")
                  $("img").attr("nid")

jQuery-事件绑定

    .on()     

方法绑定,里面是具体的事件,匿名函数里面填写事件触发
                $("#all").on("click", function(){
                  // blablabla...
                })

jQuery-循环

    $(":checkbox").each(function(){
              console.log(this);
            })

    this就是当前循环到的标签,是一个DOM对象,如果要使用jQuery方法得转换成jQuery对象

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业分解示例</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="dist/js/bootstrap.js"></script>
</head>
<body> <table border="1px" class="table table-bordered table-responsive">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead> <tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>苑局</td>
<td>日天</td>
</tr>
</tbody>
</table> <button id="all" class="btn btn-info">全选</button>
<button id="cal" class="btn btn-warning">取消</button>
<button id="rev" class="btn btn-danger">反选</button> <script src="jquery-3.2.1.min.js"></script>
<script> $("#all").on("click", function(){
$(":checkbox").prop("checked",true)
});
$("#cal").on("click", function(){
$(":checkbox").prop("checked",false)
});
$("#rev").on("click", function(){
$(":checkbox").each(function () {
if ($(this).prop("checked")==true){
$(this).prop("checked",false)
}
else {
$(this).prop("checked",true)
} })
}) </script>
</body>
</html>

checkbox

实例使用了bootstrap,具体请参照http://v3.bootcss.com/getting-started/#download进行cdn导入

jQuery--基础(操作标签)的更多相关文章

  1. jQuery基础操作

    1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  2. jquery与js的区别与基础操作

    一.什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  3. day52——jquery引入与下载、标签查找、操作标签

    day52 jquery引入 下载链接:jQuery官网 https://jquery.com/ 中文文档:jQuery AP中文文档 http://jquery.cuishifeng.cn/ < ...

  4. jQuery操作标签

    jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...

  5. jQuery操作标签--样式、文本、属性操作, 文档处理

    1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...

  6. 利用jQuery对li标签操作

    <ul class="con" id="products"> <li i=" class=""> < ...

  7. JQuery基础之获取和设置标签内容

    JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...

  8. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

  9. DOM操作标签、事件绑定、jQuery框架/类库

    DOM操作标签 ''' 在起变量名的时候 如果该变量指向的是一个标签 那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...

  10. jQuery操作标签,jQuery事件操作,jQuery动画效果,前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

随机推荐

  1. SQLServer (2005/2008) 日志清理方法

    --数据库日志名称查询 USE DBNAME GO SELECT file_id, name,* FROM sys.database_files; GO------------------------ ...

  2. cf 816E Karen and Supermarket

    题目大意 给定\(n\)一颗树,每个点上有一个物品 每个物品有价格\(c[i]\) 有优惠券,能使价格减少\(d[i]\) 但是使用优惠券的前提时购买该物品,且父亲也使用优惠券 给定钱包余额\(lim ...

  3. Bzoj1195 [HNOI2006]最短母串 [状态压缩]

    Time Limit: 10 Sec  Memory Limit: 32 MBSubmit: 1304  Solved: 439 Description 给定n个字符串(S1,S2,„,Sn),要求找 ...

  4. 【SPOJ61】Brackets(线段树)

    题意:给出一个括号序列,要求维护两种操作: 1.将第x位上的括号取反 2.查询当前整个括号序列是否匹配 n<=3e4 思路:线段树维护区间内没有匹配的左右括号数量 pushup时t[p].r=t ...

  5. sql2008安装时 重新启动计算机 失败

    原文发布时间为:2010-11-02 -- 来源于本人的百度文章 [由搬家工具导入] sql2008安装时 重新启动计算机 失败解决方法:regedit 运行 打开注册表,找到HKEY_LOCAL_M ...

  6. duilib入门简明教程 -- 自绘标题栏(5) (转)

    原文转自 http://www.cnblogs.com/Alberl/p/3343667.html         如果大家有做过标题栏的自绘,肯定会感慨各种不容易,并且现有的一些资料虽然完美的实现了 ...

  7. BusyBox 简化嵌入式 Linux 系统【转】

    转自:http://www.cnblogs.com/hnrainll/archive/2011/06/10/2077393.html BusyBox 的诞生 BusyBox 最初是由 Bruce Pe ...

  8. tomcat 多实例的Sys V风格脚本

    -------------------------------------------------[翠花,上脚本]------------------------------------------- ...

  9. php基础 gd图像生成、缩放、logo水印和验证码

    gd库是php最常用的图片处理库之一(另外一个是imagemagick),可以生成图片.验证码.水印.缩略图等等. 图像生成 <?php /* 用windows画图板画图 1.新建空白画布(指定 ...

  10. (0)git安装

    windows安装 https://blog.csdn.net/sishen47k/article/details/80211002