JavaScript新手经常遇到的问题（一）

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">

</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

posted @ 2019-09-08 14:11 不睡阅读(583) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不睡

JavaScript新手经常遇到的问题（一）

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

公告