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--基础(操作标签)的更多相关文章

jQuery基础操作
1.jQuery的介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
jquery与js的区别与基础操作
一．什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
day52——jquery引入与下载、标签查找、操作标签
day52 jquery引入下载链接:jQuery官网 https://jquery.com/ 中文文档:jQuery AP中文文档 http://jquery.cuishifeng.cn/ < ...
jQuery操作标签
jQuery操作标签样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...
jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作全选,反选效果 4.文档处理操作标签一.样式操作样式类: addClass(); // 添加指定的css类名 removeClass(); //移除指定的css ...
利用jQuery对li标签操作
<ul class="con" id="products"> <li i=" class=""> < ...
JQuery基础之获取和设置标签内容
JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...
jQuery基础之获取和设置标签元素属性
jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...
DOM操作标签、事件绑定、jQuery框架/类库
DOM操作标签 ''' 在起变量名的时候如果该变量指向的是一个标签那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' # 动态创建一个a标签并添加到页面指定 ...
jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

随机推荐

利用canvas裁剪想要的图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
bzoj 1031 [JSOI2007]字符加密Cipher 后缀数组模板
题目链接题目描述喜欢钻研问题的JS同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法 :把需要加密的信息排成一圈,显然,它们有很多种不同的读法.例如下图,可以读作: ...
C# 的 String.CompareTo Equals和==的比较
String.CompareTo 语法 public int CompareTo( string strB) 返回值小于 0,实例小于参数 strB: 0,实例等于参数 strB: 大于 0, ...
LeetCode OJ--Word Break II ***@
https://oj.leetcode.com/problems/word-break-ii/ class Solution { public: unordered_set<string> ...
Codeforces Gym101522 A. Ambiguous Dates (La Salle-Pui Ching Programming Challenge 培正喇沙編程挑戰賽 2017)
A. Ambiguous Dates There are two popular formats for representing a date: day/month/year or month/da ...
【Spring源码解析】—— 简单工厂模式的BeanFactory的超简版实现
一.什么是简单工厂模式设计模式的核心是“分工”,通过分工将对象与职责划分的更细化,进而提升系统设计的可扩展性,使其更容易维护. 开闭原则:对扩展开放,对修改关闭:要增加一个新的处理逻辑,可以开一个新 ...
洛谷——P1186 玛丽卡
P1186 玛丽卡题目描述麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道 ...
JAVA基础之Set接口
个人理解: Set接口是Collection接口的子类,其继承了所有方法,HashSet集合则实现了Set接口,其内部存储数据时依靠哈希表,一个类似数组和链表的结合体.设置空集合时,存在默认的容量和加 ...
workflow engine Ruote初体验之一（概念）
由于最近自己写点小东西,需要有工作流程管理方面的应用,所有的环境为Ruby on rails,所有在选择流程引擎的时候选择了ruote,但是对于ruote是完全陌生的,所以在这里记下点滴,如果理解的不 ...
基于WPF系统框架设计(10)-分页控件设计
背景最近要求项目组成员开发一个通用的分页组件,要求是这个组件简单易用,通用性,兼容现有框架MVVM模式,可是最后给我提交的成果勉强能够用,却欠少灵活性和框架兼容性. 设计的基本思想传入数据源,总页 ...

jQuery--基础(操作标签)

jQuery-样式操作

.css()

位置相关

返回顶部

尺寸

jQuery-文本操作

text()

html()

val()

jQuery-属性操作

prop()

attr()

jQuery-事件绑定

.on()

jQuery-循环

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

随机推荐

热门专题

　　.css()

　　位置相关

　　返回顶部

　　尺寸

　　　　text()

　　　　prop()

　　　　.on() 　　