jq相关 && php在html、js、jq中的原生语法

最新推荐文章于 2021-03-09 23:24:26 发布

杨西瓜

最新推荐文章于 2021-03-09 23:24:26 发布

阅读量420

点赞数

分类专栏：前端文章标签： jq的each如何使用 jq的属性改为对象

本文链接：https://blog.csdn.net/qq_33862644/article/details/78419409

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

https://www.bootcdn.cn/

$.parseJSON( json ) //JSON字符串转为与之对应的JavaScript对象

语法相关：

在html或js中使用php语法的结构：

注意：有的框架后缀是.html文件也可以解析php，这是因为框架的模板解析规则

//php在jq中的使用

//php在js中的使用

//php在html中的使用

点击查看下图完整的代码：https://blog.csdn.net/qq_33862644/article/details/79644042

jq的常用方法：

        //特殊的
            ready();       
                案例：这等价于调用推荐的方式： 
                    $(function() {
                        // Handler for .ready() called.
                    });
            $(this);     //当前对象
            toggle()    //绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
            each();
        //操作属性
            //获取值
            val()       //无参数获取值；带参数给当前对象赋值
            attr()      //1个参数，获取当前属性的值；2个参数给当前属性赋值
            //填充值
            html()      //""清空当前的值，1个参数是赋值
            text()      //修改标签外 或 被俩个标签包裹 的字

        //绑定事件  
            on();	//第2个参数，是由哪个选择器触发该事件
            bind()      //给获取的元素，绑定事件
        //隐藏、显示
            hide();
            show();
        //操作节点【增、删、查、改（先删后增）】
            find();	//查找x个节点，标签的话直接写标签名，id的话用#
            appendTo();	//将匹配的元素插入到目标元素的最后面
            append		//和上一个一样，追加节点
            parent()；	//父节点
            remove		//删除节点
        //操作css
            css();      //1个参数修改，都个参数用{}

//*当前对象（绑定点击事件的标签）中，查找类名为banner_id元素的值
let $id = $(this).find(".banner_id").val();

//将jq的属性 改成 对象
        function foo(options){
            jQuery.extend(function(){
                    {name:"bar"}    //用{}将其改成对象
                    {length:5}
                    {dataType:"xml"}
            },opeions);
        };

//data 要循环的数组；i键e值（等同于foreach的key=>value）
$.each(data,function(i,e){
    console.log(e['id']);
});

$.ajax({                                //发送ajax
        url:sendUrl,                        //url
        type:'post',                        //以post发送
        data:{'user':sendData},             //要发送的数据。后端接收$_POST['user']
        dataType:'json',                    //返回的数据类型
        success:function(res){
            console.log(res);               
        }
    });

jq的效果：功能点

1、动态删除图片

//动态删除图片
$(".del_img").on("click",".del_node",function(){    //del_img触发click事件找del_node
    $(this).remove();   //找到后是$(this) 直接删除这个节点
});

live()已被废弃，现在用on
注解：附加一个事件处理器到匹配目前选择器的所有元素，现在和未来
第2个参数是 匹配目前选择器的所有元素现在和未来
第3个参数是 事件处理器

所以我用父元素触发on事件，在里面找子元素

2、一个按钮，切换2种状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <input type="button" value="显示" id="teacher_aptitude" res="1"/>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
    <script>
        $(function () {
            //思路：通过在标签上加自定义的属性，改变其属性值来完成
            $("#teacher_aptitude").click(function() {
                var flag = $(this).attr("res");
                if(flag == 1){
                    $(this).attr({res:"2",value:"隐藏"});     
                }else{
                    $(this).attr({res:"1",value:"显示"});     //默认值是1 && 显示
                }
            });
        });
    </script>
</body>
</html>

js的效果：功能点

1、动态添加图片

思路：后台将所有图片存到一个字段中

 //显示教学资质的图片
        var imgArr = $("#imgUrl").val().split(","); //将数据库中的字符串，分隔成数组
        for(var i=0;i<imgArr.length;i++){
            $("#showImg").append('<img src=http://'+ imgArr[i] +'>');    //动态添加img
        }