$.ajax({
url: "http://www.yk.com/Insert",
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
Code: 123,
Data: "data",
Comment: ""
}),
success: function (data) { }
});
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js"></script>
<style type="text/css"></style>
<title>@cloudformatter template</title>
</head>
<body>
<div id="buttons">
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'download'})">PDF</button>
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'download', mimeType:'application/postscript'})">Postscript</button>
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'download', mimeType:'application/vnd.ms-xpsdocument'})">XPS</button>
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/svg+xml'})">SVG</button>
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/png'})">PNG @120dpi</button>
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/jpg', resolution:'60'})">JPG @60dpi</button>
<button onclick="return xepOnline.Formatter.Format('JSFiddle', {render:'embed', mimeType:'image/gif', resolution:'30'})">GIF @30dpi</button>
</div>
<hr>
<div id="JSFiddle">
<!-- Insert your document here -->
<header style="display:none;margin-top:20px;"><p>Add your header</p></header>
<footer style="display:none"><p>Add your header</p></footer>
<h1>Create a Document Here</h1>
</div>
</body>
</html>
Ekrandaki verilerin “screenshots” almak için kullanılır.
To save the generated export files on client side, include:
<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
To export the table as a PDF file the following includes are required:
<script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script> <script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
To export the table in PNG format, you need to include:
<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
To generate the export file in the desired format, finally include:
<script type="text/javascript" src="tableExport.min.js"></script>
Please keep this include order.
https://github.com/hhurz/tableExport.jquery.plugin
<div id="divLoading" style="display:none; z-index: 10002;">
<div class="jtable-busy-panel-background" style="left:0; top:0; margin:0; width: 100%; height: 100%;"></div>
<div style="position: fixed; top: 45%; left: 45%;">
<i class="fa fa-refresh fa-spin fa-5x fa-fw margin-bottom"></i>
</div>
</div>
$(document).ajaxStart(function () {
onBegin();
});
$(document).ajaxStop(function (event, request, settings) {
onComplete();
});
function onBegin() {
$("#divLoading").show();
}
function onComplete() {
$("#divLoading").hide();
}
Kanyank: http://www.gencprogramci.net/sayfalar/icerik_perma/151/jquery-neden-calismiyor
Seçilen nesne üzerinde belitilen stil varsa kaldırır yoksa ekler. Bir nevi anahtar gibi çalışır.
<style>
.kare{
width:60px;
height: 60px;
background-color:black;
}
.renk {
color:white;
}
</style>
<div id="divKare" class="kare renk"></div> <button id="toggleClass">toggleClass</button>
$("#toggleClass").click(function () {
$('#divKare').toggleClass('kare renk');
});
Seçilenen nesnedeki var olan stili kaldırır.
<style>
.kare{
width:60px;
height: 60px;
background-color:black;
}
.renk {
color:white;
}
</style>
<div id="divKare" class="kare renk"></div> <button id="removeClass">removeClass</button>
$("#removeClass").click(function () {
$('#divKare').removeClass('kare renk');
});
Daha önceden hazırladığımız stilin seçili olan nesneye atayabilmesini sağlar.
<style>
.kare{
width:60px;
height: 60px;
background-color:black;
}
.renk {
color:white;
}
</style>
<div id="divKare"></div> <button id="addClass">addClass</button>
$("#addClass").click(function () {
$('#divKare').addClass('kare renk');
});
Seçili nesnenin stil(style) özellikleri öğrenilir ve değiştirilir.
<button>p elementinin rengini değiştir </button> <p>Deneme text</p> <p>Deneme deneme deneme</p>
$("button").click(function(){
$("p").css("color", "red");
});
.attr() : Belirtilen nesnenin alt özelliklerine erişmeye yarar.
<img src="https://www.google.com/intl/en_ALL/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google . . ." title="Google Her Yerde" ><br> <button id="title">Title Getir</button> <button id="titleChange">Title Değiştir</button>
$("#title").click(function () {
alert($("img").attr("title"));
});
$("#titleChange").click(function () {
$("img").attr("title", "Google Her Yerde.......");
alert($("img").attr("title"));
});
.removeAttr() : Belirtilen nesneden istenilen özniteliğin kaldırılmasını sağlar.
<img src="https://www.google.com/intl/en_ALL/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google . . ." title="Google Her Yerde" ><br> <button id="title">Title Getir</button> <button id="titleRemove">Title Kaldır</button>
$("#title").click(function () {
alert($("img").attr("title"));
});
$("#titleRemove").click(function () {
$("img").removeAttr("title");
alert($("img").attr("title"));
});
<p id="test1">Vermeyince Mabut,</p>
<p id="test2">Vermeyince Mabut,</p>
<p>Varsayılan Değer: <input type="text" id="test3" value="Vermeyince Mabut,"></p>
<button id="btn1">Değer Ata Text</button>
<button id="btn2">Değer Ata HTML</button>
<button id="btn3">Değer Ata</button>
<hr />
<p><a href="https://www.yakupkalebasi.com" id="yami" title="test test">yakupkalebasi.com</a></p>
<button id="btn4">Link değerini değiştir.</button>
$("#btn1").click(function () {
$("#test1").text("Neylesin Mahmut");
});
$("#btn2").click(function () {
$("#test2").html("<b>Neylesin Mahmut</b>");
});
$("#btn3").click(function () {
$("#test3").val("Neylesin Mahmut");
});
$("btn4").click(function () {
$("#yami").attr({
"href": "https://www.yakupkalebasi.com/jquery",
"title": "jQuery"
});
});
<p id="test">vermeyince <b>mabut</b> neylesin kel <b>mahmut</b></p> <button id="btn1">Yazıyı Göster</button> <button id="btn2">Yazının HTML içeriğini göster</button> <hr /> <p>Adınız: <input type="text" id="text3" value="Yakup"></p> <button id="btn3">Değer Göster</button> <hr /> <p><a href="https://www.yakupkalebasi.com" id="yami">yakupkalebasi.com</a></p> <button id="btn4">Değer Göster</button>
$("#btn1").click(function () {
alert("Text: " + $("#test").text());
});
$("#btn2").click(function () {
alert("HTML: " + $("#test").html());
});
$("#btn3").click(function () {
alert("Value: " + $("#text3").val());
});
$("#btn4").click(function () {
alert($("#yami").attr("href"));
});
<button>Listedeki elemanları göster</button> <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul>
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
.add() : Seçili olan nesneye yeni bir özellik ekler.
<div class=’yazi’>Yakup KALEBAŞI</div>
Yukarıdaki yazdi div’ e color rengini eklemek istersek
$('div').css('color','red');
$('.yazi').css('color','red');
Her iki satırda div ‘in rengini kırmızı yapacaktır.
.children() : Seçilen nesnenin içerisindeki alt nesnelere erişmeye yarar.
<ul>
<li>
Araçlar
<ul id="seviye1_1">
<li>Otobüs</li>
<li>Taksi</li>
<li>Kamyon</li>
</ul>
</li>
<li>
Meslekler
<ul id="seviye1_2">
<li>Avukat</li>
<li>Doktor</li>
<li>Öğretmen</li>
</ul>
</li>
</ul>
$('ul#seviye1_2').children().css('background-color', 'yellow');
.closest() : Girilen ifade ile seçici arasındaki en yakın blok nesneleri seçer.
<div id="level2">
<span>Level 2</span>
<div id="level1">
<span>Level 1</span>
<div id="level0">
<div id="main">
<span>Main</span>
</div>
</div>
</div>
</div>
$('#main').closest('#level1').css('color', 'red');
.contents(): Belirtilen seçiciye göre verilen ifadenin aranan noktasına manüplasyon yapar.
<div><em>Merhaba Kullanıcı.....</em></div> <button>"em" tag 'nın içeriğini bul ve "b" tagı arasına al</button><br>
$("button").click(function () {
$("div").contents().filter("em").wrap("<b/>");
});
.find() : Belirtilen seçicinin içerisindeki nesneyi seçmeye yarar.
<ul>
Arabalar
<li>
BMW
<span>M5</span>
<strong>Spor</strong>
<span>Harika</span>
</li>
</ul>
$("ul").find("span").css({ "color": "red", "border": "2px solid red" });
.next() : Bir nesneden sonraki nesyeyi seçer.
<ul>
Aile
<li>Anne</li>
<li>Baba</li>
<li class="cocuklari">cocuklarin dan sonra torun gelir.</li>
<li>İlk torunum</li>
<li>İkinci torunumuz</li>
</ul>
$("li.cocuklari").next().css({ "color": "red", "border": "2px solid red" });
.parent() : Belirtilen nesnenin üstündeki nesneye geçilir.
<div>
<p>iç paragraf</p>
</div>
<div id="div1">
dış paragraf
</div>
$("p").parent().css('background', 'red');
JQuery ile Öznitelikleri nasıl seçebileceğimizi örnekli olarak inceleyelim.
<a lang="en" href="#">English</a> <a lang="tr" href="#">Türkçe</a>
Sayfamız da bulunan lang=”tr” olan değeri seçmek istersem yani “a” değerinin bir özniteliği olan “lang” değerini istiyorsam, bunu jquery ile
$('a[lang|="tr"]')
kullanarak yaparım. Hatta CSS ile bir tanımlama da eklemek istersem
$('a[lang|="tr"]').css('border','3px red');
şeklinde yapabilirim.
<input type="text" name="iletisim" /> <input type="text" name="ilet" /> <input type="text" name="sim" /> <input type="text" name="gorsel" />
| Method | Açıklama |
|---|---|
| $(‘input[name]’); | Nesne özelliği olan input ları seçer |
| $(‘input[name=”iletisim”]’); | Nesne özelliği iletisim olan linkleri seçer |
| $(‘input[name^=”ilet”]’); | Nesne özelliği ilet olan linkleri seçer |
| $(‘input[name$=”sim”]’); | Nesne özelliği sim ile biten linkleri seçer |
| $(‘input[name!=”iletisim”]’); | Nesne özelliği iletisim olmayan linkleri seçer |
| $(‘input[name*=”et”]’); | Nesne özelliği içerisinde et ifadesi geçen linkleri seçer |
Form Seçiciler:
button => $(‘input:button’);
submit => #(‘input:submit’);
Web sayfasında bulunan nesnelerin temelde üç ortak özelliği vardır.
Nesneyi seçmenin üç farklı yolu vardır.
Tag: $(“a”) sayfadaki bütün “a” etiketli nesneleri seçer.
Class: $(“.okul”) sayfadaki “okul” stiline sahip nesneleri seçer.
ID: $(“#alt”) sayfadaki “alt” id’sine sahip nesneleri seçer.