Webフロントエンド学習ノート——jQueryの操作ノード、属性、サイズと位置
224197 ワード
jQueryノード操作
ノードの作成
ノードの追加
ノードのクリアと削除 empty:指定したノードのすべての要素を空にし、自身で保持(ポータルのクリーンアップ) remove:emptyに比べて自身も削除(自殺)
クローンノード:一致する要素 をコピー
ケース都市選択[11-都市選択ケース.html] 削除テーブル[12テーブル削除ケース.html] データ生成テーブル[13-テーブル生成例.html] テーブルデータの追加と削除[14-ダイナミックデータの追加と削除.html]
jQuery操作プロパティ
attr操作単一属性 を設定する.複数の属性 を設定する.取得属性 属性 を除去する.
prop操作はjQuery 1にある.6以降、checked、selected、disabledのようなbooleanタイプの属性ではattrメソッドは使用できず、propメソッドしか使用できません.
val()/text/()html()
ケース表全選逆選[15-表全選逆選.html] タイピング効果[16-タイピング効果.html]
jQuery寸法と位置操作
widthメソッドとheightメソッド高さを設定または取得する、内側マージン、枠線、外側マージン を含まない.
Webページの表示範囲の幅を取得
innerWidth/innerHeight/outerWidth/outerHeight
scrollTopとscrollLeft垂直スクロールバーを設定または取得する位置 .
offsetメソッドとpositionメソッド offsetメソッドは要素距離documentの位置を取得し、positionメソッドは要素距離が位置決めされた親要素(offsetParent)の位置を取得する.
ケース:固定ナビゲーションバー[17-固定ナビゲーションバー.html]
例:エレベーターナビゲーション[18-エレベーターナビゲーション.html]
ノードの作成
// $(htmlStr)
// htmlStr：html
$(');
ノードの追加
append appendTo
prepend prependTo
before
after
ノードのクリアと削除
$('div').empty(); // div （ ， ， ）
$('div').html('');// html ， ， ， 。
$('div').remove();
クローンノード
// $(selector) （ ）
// cloneNode(true)
// ， 。 ， 。
$(selector).clone();
ケース
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
style>
<script src="vendor/jquery.js">script>
<script>
$(function () {
//
$("#btn-sel-all").click(function () {
// 1. option
var options = $("#src-city>option");
// 2.
$("#tar-city").append(options);
});
//
$("#btn-sel-none").click(function () {
var options = $("#tar-city>option");
$("#src-city").append(options);
});
//
$("#btn-sel").click(function () {
// 1. option
// :selected ，
var options = $("#src-city>option:selected");
// 2.
$("#tar-city").append(options);
});
$("#btn-back").click(function () {
var options = $("#tar-city>option:selected");
$("#src-city").append(options);
});
});
script>
head>
<body>
<h1> ：h1>
<select id="src-city" name="src-city" multiple>
<option value="1"> option>
<option value="2"> option>
<option value="3"> option>
<option value="4"> option>
<option value="5"> option>
select>
<div class="btn-box">
<button id="btn-sel-all"> >> button>
<button id="btn-sel-none"> << button>
<button id="btn-sel"> >button>
<button id="btn-back"> < button>
div>
<select id="tar-city" name="tar-city" multiple>
select>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "΢ÈíÑźÚ";
color: #fff;
}
td {
font: 14px "΢ÈíÑźÚ";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item > .lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item > .txt {
width: 300px;
height: 32px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.15;
display: none;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: ËÎÌå;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
style>
<script src="vendor/jquery.js">script>
<script>
$(function () {
// 1. delete
$(".get").click(function () {
// 2.
$(this).parent().parent().remove();
});
$("#btn").click(function() {
$("#j_tb").empty();
});
});
script>
head>
<body>
<div class="wrap">
<input type="button" value=" " id="btn">
<table>
<thead>
<tr>
<th> th>
<th> th>
<th> th>
tr>
thead>
<tbody id="j_tb">
<tr>
<td>JavaScripttd>
<td> - td>
<td><a href="javascrip:;" class="get">DELETEa>td>
tr>
<tr>
<td>csstd>
<td> - td>
<td><a href="javascrip:;" class="get">DELETEa>td>
tr>
<tr>
<td>htmltd>
<td> - td>
<td><a href="javascrip:;" class="get">DELETEa>td>
tr>
<tr>
<td>jQuerytd>
<td> - td>
<td><a href="javascrip:;" class="get">DELETEa>td>
tr>
tbody>
table>
div>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px " ";
color: #fff;
}
td {
font: 14px " ";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
style>
<script src="vendor/jquery.js">script>
<script>
//
var data = [{
name: " ",
url: "http://www.itcast.cn",
type: "IT "
}, {
name: " ",
url: "http://www.itheima.com",
type: " IT "
}, {
name: " ",
url: "http://web.itcast.cn",
type: " "
}];
$(function () {
$("#j_btnGetData").click(function () {
var htmlStr = "";
for(var i = 0; i< data.length;i++){
//data[i].name
//data[0].url = "http://www.itcast.cn"
htmlStr += ""+data[i].name+""+data[i].url+""+data[i].type+"";
}
$("#j_tbData").html(htmlStr);
});
});
script>
head>
<body>
<input type="button" value=" " id="j_btnGetData" />
<table>
<thead>
<tr>
<th> th>
<th> th>
<th> th>
tr>
thead>
<tbody id="j_tbData">
tbody>
table>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px " ";
color: #fff;
}
td {
font: 14px " ";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item > .lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item > .txt {
width: 300px;
height: 32px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
display: none;
}
#j_hideFormAdd {
width: 22px;
height: 22px;
cursor: pointer;
text-align: center;
line-height: 22px;
font-size: 18px;
}
#j_hideFormAdd:hover {
background-color: skyblue;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: ;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
style>
<script src="vendor/jquery.js">script>
<script>
$(function () {
// 1： ， ；
// 2： X ， ；
// 3： ， tr tbody ；
// 4： get a
// 1： ， ；
$("#j_btnAddData").click(showOrHide);
// 2： X ， ；
$("#j_hideFormAdd").click(showOrHide);
// 3： ， tr tbody ；
$("#j_btnAdd").click(function () {
// （input value ）；
var val1 = $("#j_txtLesson").val();// value val();
var val2 = $("#j_txtBelSch").val();// value val();
//bug3: val1 val2 ；
if(val1.trim() === "" || val2.trim() === ""){
alert(" ， ！");
$("#j_txtLesson").val("");
$("#j_txtBelSch").val(" - ");
return;
}
// tr tbody ；
var jqTr = $("");
// tr td ；
jqTr.html(''+val1+''+val2+'GET');
// tr tbody ；
$("#j_tb").append(jqTr);
//bug1: ；
showOrHide();
//bug2: ， vlaue ；
$("#j_txtLesson").val("");
$("#j_txtBelSch").val(" - ");
//bug4： tr a ；
jqTr.find("a").click(function () {
$(this).parent("td").parent("tr").remove();
});
});
// 4： get a ( a )
$("#j_tb a").click(function () {
$(this).parent("td").parent("tr").remove();
});
//
function showOrHide() {
// ；
$("#j_mask").toggle();
$("#j_formAdd").toggle();
}
});
script>
head>
<body>
<div class="wrap">
<div>
<input type="button" value=" " id="j_btnAddData" class="btnAdd"/>
div>
<table>
<thead>
<tr>
<th> th>
<th> th>
<th> th>
tr>
thead>
<tbody id="j_tb">
<tr>
<td>JavaScripttd>
<td> - td>
<td><a href="javascrip:;" class="get">deletea>td>
tr>
<tr>
<td>csstd>
<td> - td>
<td><a href="javascrip:;" class="get">deletea>td>
tr>
<tr>
<td>htmltd>
<td> - td>
<td><a href="javascrip:;" class="get">deletea>td>
tr>
<tr>
<td>jQuerytd>
<td> - td>
<td><a href="javascrip:;" class="get">deletea>td>
tr>
tbody>
table>
div>
<div id="j_mask" class="mask">div>
<div id="j_formAdd" class="form-add">
<div class="form-add-title">
<span> span>
<div id="j_hideFormAdd">×div>
div>
<div class="form-item">
<label class="lb" for="j_txtLesson"> ：label>
<input class="txt" type="text" id="j_txtLesson" placeholder=" ">
div>
<div class="form-item">
<label class="lb" for="j_txtBelSch"> ：label>
<input class="txt" type="text" id="j_txtBelSch" value=" - ">
div>
<div class="form-submit">
<input type="button" value=" " id="j_btnAdd">
div>
div>
body>
html>
jQuery操作プロパティ
attr操作
// ：
// ：
$obj.attr(name, value);
//
$('img').attr('title',' ， ');
$('img').attr('alt',' ， ');
// ，
$obj.attr(obj)
//
$('img').attr({
title:' ， ',
alt:' ， ',
style:'opacity:.5'
});
// ，
$obj.attr(name)
//
var oTitle = $('img').attr('title');
alert(oTitle);
// ： ，
$obj.removeAttr(name);
//
$('img').removeAttr('title');
prop操作
//
$(':checked').prop('checked',true);
//
$(':checked').prop('checked');// true false
val()/text/()html()
$obj.val() value
$obj.html() innerHTML
$obj.text() innerText/textContent，
ケース
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px " ";
color: #fff;
}
td {
font: 14px " ";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
style>
<script src="jquery-1.12.1.js">script>
<script>
$(function () {
//
// thead ,
// $("#j_cbAll").click(function () {
// //
// var flag= $(this).prop("checked");
// //
// if(flag){
// $("#j_tb").find("input").prop("checked",true);
// }else{
// $("#j_tb").find("input").prop("checked",false);
// }
// });
//thead ----
$("#j_cbAll").click(function () {
// tbody
$("#j_tb").find("input").prop("checked",$(this).prop("checked"));
});
//
$("#j_tb").find("input").click(function () {
//
var ckLength=$("#j_tb").find("input").length;
//
var checkedLenth=$("#j_tb :checked").length;
//console.log(ckLength+"====="+checkedLenth);//
// if(ckLength==checkedLenth){
// $("#j_cbAll").prop("checked",true);
// }else{
// $("#j_cbAll").prop("checked",false);
// }
$("#j_cbAll").prop("checked",checkedLenth==ckLength);
});
});
script>
head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
th>
<th> th>
<th> th>
tr>
thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
td>
<td>JavaScripttd>
<td> td>
tr>
<tr>
<td>
<input type="checkbox"/>
td>
<td>csstd>
<td> td>
tr>
<tr>
<td>
<input type="checkbox"/>
td>
<td>htmltd>
<td> td>
tr>
<tr>
<td>
<input type="checkbox"/>
td>
<td>jQuerytd>
<td> td>
tr>
tbody>
table>
div>
body>
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
* {
margin: 0;
padding: 0;
}
@keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
@-webkit-keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
@-moz-keyframes blink {
0%,
100% {
opacity: 1
}
50% {
opacity: 0
}
}
.wrap {
width: 1000px;
text-align: center;
margin: 100px auto 0;
}
.wrap h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
.word {
font-weight: 700;
}
.typed-cursor {
opacity: 1;
-webkit-animation: blink .7s infinite;
-moz-animation: blink .7s infinite;
animation: blink .7s infinite;
display: none;
}
.saySection {
margin-top: 50px;
}
.saySection input {
font-size: 30px;
}
.saySection .txtSay {
padding-left: 10px;
}
.saySection .btnSay {
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
style>
<script src="vendor/jquery.js">script>
<script>
$(document).ready(function () {
// ： ， ， ； ；
//1. ， ， ：" ";
//2. input ， ， ：input value ;
// ；
var timer = null;
// ；
fn(" ");
// ， input value
$("#btnSay").click(function () {
fn($("#inValue").val());
});
// ；
// ：
//0. ；
//1. num； ， ； ； ；
//2. word ； num++;
//3. ；
//4. ；
function fn(str){
//0. ； ， ；
clearInterval(timer);
$(".typed-cursor").show();
//1. num， ； ； ； ；
var num = 0;
var newStr = "";
timer = setInterval(function () {
// ： ， (undefined)， ；
if(str[num] !== undefined){
//2. word ； num++;
newStr += str[num];// ； str.charAt(num);
$(".word").text(newStr);
num++;
}else{
//3. ；
clearInterval(timer);
//4. ；
$(".typed-cursor").hide();
}
},300);
}
});
script>
head>
<body>
<div class="wrap">
<h1>
You want to say ：
<span class="word">span>
<span class="typed-cursor">|span> ！
h1>
<div class="saySection">
<input type="text" id="inValue" class="txtSay"/>
<input type="button" value="Say" id="btnSay" class="btnSay"/>
div>
div>
body>
html>
jQuery寸法と位置操作
widthメソッドとheightメソッド
//
$('img').height(200);
//
$('img').height();
Webページの表示範囲の幅を取得
//
$(window).width();
//
$(window).height();
innerWidth/innerHeight/outerWidth/outerHeight
innerWidth()/innerHeight() / （ ）。
outerWidth()/outerHeight() / （ ）。
outerWidth(true)/outerHeight(true) / （ 、 ）。
scrollTopとscrollLeft
//
$(window).scrollTop();
//
$(window).scrollLeft();
offsetメソッドとpositionメソッド
// document , ：{left:100, top:100}
$(selector).offset();
// 。
$(selector).position();
ケース:固定ナビゲーションバー[17-固定ナビゲーションバー.html]
<html>
<head lang="en">
<meta charset="UTF-8">
<title> title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top, .nav {
width: 1423px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 0 auto;
}
img {
display: block;
vertical-align: middle;
}
style>
<script src="vendor/jquery.js">script>
<script>
// window.onload;
window.onload = function () {
// ， ， ；
// ( margin padding， )
// console.log(top); // top ；
// console.log(location);
// console.log(history);
// console.log(navigator);
// console.log(screen);
// /
$(window).scroll(function () {
//console.log($(document).scrollTop());// ，
// ： ， ；
//alert($(".top").height());
if($(document).scrollTop() > $(".top").height()){
// ；
$(".nav").css({"position":"fixed","left":0,"top":0,});
// padding/margin；
$(".main").css("padding-top",$(".nav").height());
}else{
// ， ， padding；
$(".nav").css({"position":"static","left":0,"top":0,});
$(".main").css("padding-top",0);
}
});
};
script>
head>
<body>
<div class="top">
<img src="images/top.png"/>
div>
<div class="nav">
<img src="images/nav.png"/>
div>
<div class="main">
<img src="images/main.png"/>
div>
body>
html>
例:エレベーターナビゲーション[18-エレベーターナビゲーション.html]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Documenttitle>
<style type="text/css">
*{
margin:0;padding:0;
}
ul{list-style: none;}
.top,.dian,.jia,.fu,.mei,.bottom{
width: 1210px;
margin: 0 auto;
}
.subnav
{
position: fixed;
width: 38px;
height: 200px;
top:200px;
left:50%;
margin-left:605px;
display: none;
}
.subnav li,.back{
height: 36px;
border:1px solid #DEDEDE;
margin-bottom: 5px;
font-size:0;
background: url(images/bg.png) no-repeat;
}
.subnav li:hover,.subnav li.current,.back
{
border:1px solid #ED5759;
background: #FDEEEE; /* */
/* */
/* css */
font-size:12px;
color: #ED5759;
padding-left: 6px;
padding-top: 2px;
height: 34px;
cursor: pointer;
}
style>
<script type="text/javascript" src="vendor/jquery.js">script>
<script type="text/javascript">
$(document).ready(function() {
/*alert($(".jia").offset().top);*/
/* */
var num=null; /* */
$(".subnav li").each(function(index, el) {
num=-index*55; /* ， ： *55*/
$(el).css("background-position","0px "+num+"px");
});
/* */
var T=null;
$(window).scroll(function(event) {
T=$(document).scrollTop(); /* */
if(T>=$(".mei").offset().top)
{
$(".subnav li").eq(3).addClass('current').siblings().removeClass();
}
else if(T>=$(".fu").offset().top)
{
$(".subnav li").eq(2).addClass('current').siblings().removeClass();
}
else if(T>=$(".jia").offset().top)
{
$(".subnav li").eq(1).addClass('current').siblings().removeClass();
}
else if(T>=$(".dian").offset().top)
{
$(".subnav li").eq(0).addClass('current').siblings().removeClass();
}
else if(T>0) /* 0 */
{
$(".subnav").fadeIn();
}
else /* 0 */
{
$(".subnav").fadeOut();
}
});
/* */
/* $(".subnav li").eq(0).click(function(event) {
$("html,body").stop().animate({
"scrollTop":$(".dian").offset().top
},2000);
/* body html
});
$(".subnav li").eq(1).click(function(event) {
$("html,body").stop().animate({
"scrollTop":$(".jia").offset().top
},2000);
/* body html
});*/
$(".subnav li").click(function(event) {
/*alert($(this).index());*/
$("body,html").stop().animate({
"scrollTop":$(".jd").eq($(this).index()).offset().top
},2000);
});
/* */
$(".back").click(function(event) {
$("body,html").stop().animate({"scrollTop":0},100)
});
});
script>
head>
<body>
<div class="top">
<img src="images/top1.png" alt="" />
div>
<div class="jd dian">
<img src="images/dian.png" alt="" />
div>
<div class="jd jia">
<img src="images/jia.png" alt="" />
div>
<div class="jd fu">
<img src="images/fu.png" alt="" />
div>
<div class="jd mei">
<img src="images/mei.png" alt="" />
div>
<div class="bottom">
<img src="images/bottom.png" alt="" />
div>
<div class="subnav">
<ul>
<li> li>
<li> li>
<li> li>
<li> li>
ul>
<div class="back"> div>
div>
body>
html>