Category Archives: jquery

jQuery.noConflict()のサンプル

JSコード
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery(“button”).click(function(){
jQuery(“p”).text(“jQuery test”);
});
});
</script>
</head>

<body>
<p>aaaa</p>
<button>click test</button>

jQueryMobileのページ間のパラメーターを渡すサンプル

サンプルコード:
$(document).bind(‘pagebeforechange’,function(e,data){
if (typeof data.toPage !== “string”){
return;
}
var paramUrl = $.mobile.path.parseUrl(data.toPage);
var params = getUrlParamPage(paramUrl.search);
});

function getUrlParamPage(string) {
var obj = {};
if (string.indexOf(“?”) != -1) {
var string = string.substr(string.indexOf(“?”) + 1);
var strs = string.split(“&”);
for(var i = 0; i < strs.length; i ++) {
var tempArr = strs[i].split(“=”);
obj[tempArr[0]] = unescape(tempArr[1]);
}
}
return obj;
}

「jQuery入門」jsonデータを読み込むサンプル

JSコード:
$(function() {
var json = ‘[{“id”:”1″,”tagName”:”data1″},
{“id”:”2″,”tagName”:”data2″},
{“id”:”3″,”tagName”:”data3″},
{“id”:”4″,”tagName”:”data4″},
{“id”:”5″,”tagName”:”data5″}]’;
$.each(JSON.parse(json), function(idx, obj) {
console.log(idx+”***”+obj.tagName);
});
});

「jQuery入門」datepickerの日付フォーマットをyyyy/mm/ddに変更する方法

1.datepickerのHP
http://jqueryui.com/datepicker/
CSSコード
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”/resources/demos/style.css”>
JSコード
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

2.サンプル
<script type=”text/javascript”>
$(function() {
$(“#birthday”).datepicker();
$(‘#birthday’).datepicker(“option”, “dateFormat”, ‘yy/mm/dd’ );

});
</script>
<label>誕生日:<input type=”text” id=”birthday”></label><br/>

「Jquery入門」return falseとpreventDedault() でformのsubmitを止める方法

1.「return false」のサンプル
$(‘#cftForm’).submit(function(event){
if (!$(‘#name’).val()) {
alert(‘name は空白です’);
return false;
};
})

2.「preventDefault」のサンプル
$(‘#cftForm’).submit(function(event){
if (!$(‘#name’).val()) {
alert(‘nameは空白です’);
event.preventDefault();
$(‘#name’).css(‘border-color’,’red’);
}
})

「jQuery入門」each()でそれぞれのliの要素を取得する

サンプルコード:
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“li”).each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>liの要素を表示button>
<ul>
<li>山田</li>
<li>大蔵</li>
<li>情報</li>
<li>技術</li>
<li>練習</li>
</ul>

「jQuery入門」attr()とremoveAttr()でhtmlのタグ要素の設定、削除

1.a要素に複数の属性を追加
$(‘a’).attr({
href: ‘http://www.sample.com/introduction/notice.html’,
title: ‘お知らせ’,
target: ‘_blank’
});

2.img要素に複数の属性を追加
$(function() {
$(‘img’).attr({alt: ‘出身’, title: ‘東京品川’, width: 320, height: 210});

});

3.div要素のid属性を削除
$(‘div’).removeAttr(‘id’);

「jQuery入門」ラジオボタン change()でイベント発動するサンプルコード

jQueryコード:
$(‘input:radio[name=”sampleAA”]’).change(function() {
if ($(this).val() == ‘true’ ) {
$(‘#sampleBB’).show();
$(‘input:radio[name=”sampleCC”]’).attr(“disabled”, “disabled”);
} else {
$(‘#sampleBB’).hide();
$(‘input:radio[name=”sampleCC”]’).removeAttr(“disabled”);

}

「jQuery入門」checkboxのcheckedプロパティを変更してchangeイベントを実行する

サンプルコード
$(‘input:checkbox[name=”sample1″]’).change(function(){
if ($(this).is(‘:checked’)) {
$(‘input:text[name=”sample2″]’).val(“10″);
$(‘input:text[name=”sample2”]’).attr(“readonly”, “readonly”);
$(‘#sample3’).hide();
} else {
$(‘input:text[name=”sample2″]’).val(“20″);
$(‘input:text[name=”sample2”]’).removeAttr(“readonly”);
$(‘#sample3’).show();
}

「jquery入門」val().change()の使い方

例1
$(‘#userForm’).find(‘input[type=”text”]’).val(‘yamada’).change();

例2
$(“#cftLoginTime”).change(function(){
//処理コード
});
例3
$(“input”).val(“yamada”).change();

2 / 1112345...10...最後 »