1、:before和:after，position: absolute;才可以调节高宽

2、判断背景颜色

$(this).css("background-color")=="rgb(95, 158, 160)" ，注加空格

$(this).css("background-color")==“red”是错误的

注意：一定要在background加的color，未改颜色之前是rgba(0, 0, 0, 0)

3、用Class，点击事件

    <div class="dic" name="div1"></div>

    <div class="dic" name="div4"></div>

    <div class="dic" name="div2"></div>

    <div class="dic" name="div3"></div>

    <script>

        $(".dic").click(function(){

            //注意一定要在background加的color，未改颜色之前是rgba(0, 0, 0, 0)

            if ($(this).css("background-color")=="rgb(95, 158, 160)") {

                $(this).css("background","red");

                alert($(this).attr("name"));    //用prop获取不到name

            } else{

                //对比字符串上加上了空格,弹出了true

//              alert($(".dic").css("background")) //对比

                $(this).css("background","cadetblue");

            }

        })

    </script>

4、获取父元素

//获取当前所有父元素的查找"td"的第一个的文本

$(this).parents().find("td").eq(0).text();

5、jQuery.data() 方法

data() 方法向被选元素附加数据，或者从被选元素获取数据。

6、Java和JavaScript的初始数据的不同

var color;

alert(color)//显示的是undefined

String color；//这个显示的是null

注：建议用alert获取JavaScript的初始数据

7、JavaScript动态添加元素如果不设定它的顺序，它的顺序就随机出现

 //翡翠寓意

    setTimeout(function(){

        $.ajax({

            url:"ProductsSelect?action=Moral",

            type:"get",

            dataType:"json",

            success:function (data) {

                var $div="<div class='divproduer' style='margin-top: 23px;'>";

                for (var i=0;i<data.length;i++){

                    var obj=data[i];

​

                    $div+="<span style='margin-right: 15px; cursor:pointer;' class='sMoral'>"+obj.moral+"</span>";

                }

                $div+="</div>";

                $("#top-right").append($div);               //注：顺序是随机的

            },

            error:function (xhr,textStatus,errorThrown) {       //失败回调

                alert("错误，"+textStatus+","+errorThrown);

            }

        })

    }, 300);

8、select的name传值，

<select name="education">

　　<option value="高中">高中</option>
　　<option value="专科">专科</option>
　　<option value="本科">本科</option>
　　<option value="博士">博士</option>

</select>

9、form提交方式

这样不能将数据提交给后台

<input type="button" value="批量删除"/>

form表单中的传递方法有<button>和<input type="submit">两种，他们的功能是一样的
注：如果form没有写action属性的话，就只能在url后面加"?title=..."数据，只不过使用<button>可以显示"?title=..."，<input type="submit">不显示

10、获取子类数据

<body>

  <div>

    <span>Hello</span>

    <p class="selected">Hello Again</p>

    <div class="selected">And Again</div>

​

    <p>And One Last Time</p>

  </div>

  <!--children:孩子们-->

<script>alert($("div").children(".selected").eq(0).text());</script>

</body>

11、jq获取相邻元素的上一个或下一个

相邻元素下一个

//只能获取下一个

$(this).next().val();

//获取全部下一个，这里指定元素

$(this).nextAll(".col-total").val();

相邻元素上一个

//只能获取上一个

$(this).prev().val();

//获取全部上一个，这里指定元素

$(this).prevAll(".col-total").val();

12、JavaScript的return 

retrun true； 返回正确的处理结果。

return false；返回错误的处理结果，终止处理。

return；把控制权返回给页面。

​

<a href="abc.htm" onclick="return add_onclick()">Open</a>

注：如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm；否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容.

13、form改变路径

 //改变form表路径

    $("#souform").click(function () {

        $("#form1").prop("action","/jstl/queryGoods");

        $("#form1").submit();

    })

14、在页面里显示另外一个页面

<iframe src="页面的路径" width="97%" height="80%"></iframe>

15、排序和点击时切换方法

html:

<input type="button" @click="compare2" value="排序"/>

js：

var vm=new Vue({

        el:"#app4",

        data:{

            fruits:[{

                    'name': 'abc',

                    'age': 20

                },{

                    'name': 'cde',

                    'age': 19

                },{

                    'name': 'dfc',

                    'age': 25

                },{

                    'name': 'bde',

                    'age': 21

                }],

            biaoji:1//标记

        },

        methods:{

            compare:function (property) {

                //做标记，注这里可以使用this

                if (this.biaoji==1){

                    this.biaoji=2;

                } else {

                    this.biaoji=1;

                }

                return function (a, b) {

                    //判断是否等于1，注这里不能使用this，必须vm才行

                    var two;

                    if (vm.biaoji==1){

                        two=b[property] - a[property];

                    }else {

                        two=a[property] - b[property];

                    }

                    return two//排序

                }

            },

            compare2:function () {

                // alert(vm.fruits.age);

                vm.fruits.sort(vm.compare("age"))

            }

        }

    })

    //项目：vue2_01
 

JavaScript新手经常遇到的问题（一）的更多相关文章

  1. 我要成为前端工程师！给 JavaScript 新手的建议与学习资源整理

    来源于:http://blog.miniasp.com/post/2016/02/02/JavaScript-novice-advice-and-learning-resources.aspx 今年有 ...

  2. javascript新手实例1-DOM基本操作

    学习javascript好多同学不知道怎么上手,跟着网上的新手教程做了一遍又觉得javascript很简单,但是真正自己用起来又觉得写不出什么东西,我觉得学习最好的方法就是跟着有趣的例子做,所以我们的 ...

  3. SuperMap iClient for JavaScript 新手入门

    地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...

  4. JavaScript新手学习笔记1——数组

    今天,我复习了一下JavaScript的数组相关的知识,总结一下数组的API: 总共有11个API:按照学习的先后顺序来吧,分别是: ① toString()  语法:arr.toString(); ...

  5. JavaScript新手学习笔记3——三种排序方式（冒泡排序、插入排序、快速排序）

    每种编程语言学到数组的时候,都会讲到排序算法,当时学C语言的时候,卡在排序算法.今天来总结一下javascript中如何实现三种排序算法. 1.冒泡排序(默认升序排列哦) 原理: 冒泡排序的原理,顾名 ...

  6. Javascript新手集中营

        javascript是世界上最流行的编程语言,也许没有之一,看看github,stackoverflow上面的开源项目和问答就可略知一二.它可以用来开发web app.服务器.或者联合nati ...

  7. 【从无到有】JavaScript新手教程——1.简介、变量和运算符

    今天带大家来学习一下在网页制作过程中很常用的JavaScript(简称JS).   一.JS的作用: 表单验证,减轻服务端的压力 添加页面动画效果 动态更改页面内容 Ajax网络请求 二.[使用JS的 ...

  8. JavaScript新手学习笔记（一）

    1.JavaScript 对大小写敏感. JavaScript 对大小写是敏感的. 当编写 JavaScript 语句时,请留意是否关闭大小写切换键. 函数 getElementById 与 getE ...

  9. JavaScript 新手的踩坑日记

    引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...

随机推荐

  1. CSPS_102

    $\Huge % Dybala$ T1 神奇单调栈,但是有点码农,要对着对拍调很久. T2 观察到队长跑到i点之后,前面的[1,i)的点都被经过了偶数次,再次到达的时候又得被暗杀 所以通过点i的花费可 ...

  2. CSPS模拟 41

    说不会鸽就不会鸽的 虽然是炸裂的一场 T1没读懂题,T23交了两个无脑暴力 (公式懒得打了 latex过于感人) T1 点阵内不重合的直线有多少条? 枚举斜率,那么“后继”不在点阵内的点可以作出一个贡 ...

  3. 【控制系统数字仿真与CAD】实验一：状态方程、传函为模型的系统的仿真

    一.实验目的 1. 掌握各数学模型之间的转换与数学模型的参数获取,掌握相关MATLAB命令 2. 掌握欧拉法和RK法的递推公式 3. 掌握欧拉法和RK法的MATLAB算法实现 二.实验内容 1. 分别 ...

  4. 『题解』洛谷P1351 联合权值

    更好的阅读体验 Portal Portal1: Luogu Portal2: LibreOJ Description 无向连通图\(\mathrm G\)有\(n\)个点,\(n - 1\)条边.点从 ...

  5. python_day3（文件处理）

    1.文件处理 #Author:Elson Zeng #data = open("test").read() # f = open("test",'a',enco ...

  6. 小白历险记：spingboot之helloworld

    还记得入职第一天的时候,先安装了相关的软件,配置了环境.boss叫我写的第一个程序:搭建一个springboot工程,输出helloworld. 哈哈话不多说,回忆一下. 1.打开IDEA,点击Cre ...

  7. 201871010114-李岩松《面向对象程序设计（java）》第八周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  8. spring+struts2引起的错误被记忆问题

    标题表述的比较模糊,详细情况是这样的: 目前开发的一个管理系统,当使用出现异常时会自动跳转到错误页.其处理流程是“发生异常——跳转到错误处理action——错误页”. 但是出现了一个bug,即某个操作 ...

  9. Netty处理器重要概念

    1.Netty的处理器可以分为两类:入站处理器和出战处理器 2.入站处理器顶层是ChannelInboundHandler,出战处理器顶层是ChannelOutboundHandler 3.数据处理时 ...

  10. [设置] notepad++快捷设置之——用Finger Text实现自动补全代码

    1.我参考的设置方法:https://www.e-learn.cn/content/qita/2368404   和  http://www.itdaan.com/blog/2017/09/13/f7 ...