1. Home
  2. Javascript
  3. Referência rápida de JQuery

Referência rápida de JQuery

Índice

Pare de usar JQuery!

JQuery foi criado em uma época que o browser não tinha suporte a diversos métodos que hoje todos os browsers tem suporte, então evite usar JQuery, utilize os métodos nativos.

Não use JQuery, use os métodos padrões do Javascript

Propriedades

$('#chkActiveEdit').is(':checked')
$('#chkActiveEdit').prop('checked', 'checked');
$('#chkActiveEdit').prop('checked', '');

Obter valor

$('#cboBannerDestinationTypeEdit').val()
$('#cboBannerDestinationTypeEdit').find('option:selected').text();

var $cboColors = $('#colors');
$cboColors.append($('<option />').val(1).text("Blue"));
$cboColors.append($('<option />').val(2).text("Red"));

Ajax

$.ajax({
	url: 'http://...',
	success: function (data) {

	},
	error: function (jqXHR, textStatus, errorThrown) {
		console.error('ajax error handler', jqXHR, textStatus, errorThrown);
	}
});

Jsrender

jsrender https://www.jsviews.com/#fortag

test: http://jsfiddle.net/johnpapa/NfUGB/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.86/jsrender.min.js" integrity="sha256-AH43O9QH7h0NnnZYcN6M1nbQijJs21zXNcaPiuzPzXM=" crossorigin="anonymous"></script>

<!-- deliveryAddressTemplate -->
<script id="deliveryAddressTemplate" type="text/x-jsrender">
	<p>
		{ {:foo} }
	</p>
	<ul>
		{ {for testData} }
			<li>
				{ {:name} }
				Items:
				<ul>
					{ {for items} }
						<li>
							{ {:name} }
							{ {if quantity < 2} }
								ATIVO!
							{ {/if} }
						</li>
					{ {/for} }
				<ul>

				Items2:
				{ {for items2} }
					{ {>#data} }
				{ {/for} }
			</li>
		{ {/for} }
	</ul>
</script>
<!-- /deliveryAddressTemplate -->
var obj = {
    foo: "names",
    testData: [
        {
            name: "John",
            markup: "<span style='background: yellow'>John</span>",
            items: [ { name:"aaa",quantity:0}, {name:"bbb",quantity:2}, {name:"ccc",quantity:6} ],
            items2: ["TER 01/08/2017","QUA 02/08/2017","QUI 03/08/2017","SEX 04/08/2017"]
        },
        {
            name: "Boris",
            markup: "<span style='background: orange'>Boris</span>",
            items: [ { name:"aaa",quantity:0}, {name:"bbb",quantity:2}, {name:"ccc",quantity:6} ],
            items2: ["TER 01/08/2017","QUA 02/08/2017","QUI 03/08/2017","SEX 04/08/2017"]
        }
    ]
};

var $template = $('#deliveryAddressTemplate');
var html = $template.render(obj);
$('#deliveryAddresses').html(html);

Comentários