Question

我有一个应用程序，我使用Backbone和Marionette构建，我认为这是一个jQuery函数或类似的东西，我在木偶上发现了这个代码View

$('#publicdate',this.el)[0]

纯Javascript中的代码是否类似？我试过这段代码

document.getElementById('date1')
this.getElementById('date1')

但没有工作

此处为完整代码：

programming.module("Program.Chart", function(Chart, programming, Backbone, Marionette, $, _){  
    Chart.chartT = Marionette.ItemView.extend({
        template : "#row",
        tagName : "tr"
    })

    Chart.chartV = Marionette.CompositeView.extend({
        childView : Chart.chartT,
        childViewContainer : "tbody#detail",
        template : "#chart",
        onRender : function(){  
        //DatePicker Range
            var
            startDate,
            endDate,
            updateStartDate = function() {
                startPicker.setStartRange(startDate);
                endPicker.setStartRange(startDate);
                endPicker.setMinDate(startDate);
            },
            updateEndDate = function() {
                startPicker.setEndRange(endDate);
                startPicker.setMaxDate(endDate);
                endPicker.setEndRange(endDate);
            },
            startPicker = new Pikaday({
                field: $('#date1',this.el)[0],
                minDate: new Date(),
                maxDate: new Date(2020, 12, 31),
                onSelect: function() {
                    startDate = this.getDate();
                    updateStartDate();
                }
            }),
            endPicker = new Pikaday({
                field: $('#date2',this.el)[0],
                minDate: new Date(),
                maxDate: new Date(2020, 12, 31),
                onSelect: function() {
                    endDate = this.getDate();
                    updateEndDate();
                }
            }),
            _startDate = startPicker.getDate(),
            _endDate = endPicker.getDate();
            if (_startDate) {
                startDate = _startDate;
                updateStartDate();
            }
            if (_endDate) {
                endDate = _endDate;
                updateEndDate();
            }   

        var selectdate = $('#publicdate',this.el)[0];
        selectdate.addEventListener("change",function(){
            alert("Changed")
        })




        //Chart JS
        var dataChart = programming.request("data:entities");
        console.log(dataChart.models)

        var labels = ['12/08/2016','13/08/2016','16/08/2016']
        var series = [[100,210,311],[49,10,7]]

        var data = {
            labels : labels,
            series : series
        }

        var option = {
            showArea : true,
            lineSmooth : false,
            chartPadding : {
                bottom:30,
                top:30
            },
            axisX : {
                showGrid:false
            },
            axisY : {  
            },
            plugins : [
                Chartist.plugins.ctAxisTitle({
                    axisX: {
                       axisTitle: 'Tanggal',
                       axisClass: 'ct-axis-title',
                       offset: {
                          x: 0,
                          y: 50
                       },
                       textAnchor: 'middle'
                    },
                    axisY: {
                       axisTitle: 'Jumlah Penjualan',
                       axisClass: 'ct-axis-title',
                       offset: {
                          x: 0,
                          y: 0
                       },
                       textAnchor: 'middle',
                       flipTitle: false
                     }
                }),
                Chartist.plugins.ctPointLabels({
                    textAnchor : "middle"
                })
            ]
        }
        new Chartist.Line($('.statistic',this.el)[0],data,option)
        }
    })

    Chart.notfound = Marionette.ItemView.extend({
        template : "#notfound"
    })
})

提前致谢！

Answer 1

纯Javascript中的代码是否类似？

是纯JavaScript。但是如果你想用DOM而不是jQuery来做，你可以使用querySelector：

this.el.querySelector('#publicdate')

...假设this.el是一个HTML元素。

querySelector可在document和个别元素上使用。在元素上使用它时，它只在该元素的树中查找。它接受任何有效的CSS选择器，并返回对第一个匹配元素的引用，或null。所以上面的内容与jQuery代码完全相同（除了给你null而不是undefined，如果没有找到）：仅当找到id="publicdate" 的元素时它存在于this.el的树中。

还有querySelectorAll，它返回匹配元素的列表。所有现代浏览器以及IE8都支持这两种浏览器。

我试过这段代码

document.getElementById('date1')

但没有工作

嗯，date1和publicdate是不同的ID。但document.getElementById("publicdate")和this.el.querySelector("#publicdate")之间的最大区别在于，后者只有在this.el的后代树中存在时才会找到该元素，而getElementById会找到该元素它在文档的任何地方。

有没有类似这个代码的纯Javascript $（'＃date1'，this.el）[0]？

1 个答案: