این کد ها به چه درد میخورن [بایگانی]

jamejam123

دوشنبه 26 اسفند 1392, 16:37 عصر

سلام
به این کد ها یه نگا بندازدید
من تا به حال فقط jquery کار کردم و الآن به مشکل خوردم

// اول
function $(id)
{
return document.querySelectorAll(id);
}
// دوم
function _(id)
{
return document.querySelector(id);
}
// سوم

function w(el, options)
{
var obj = document.createElement(el);

for(var k in options)
{
obj[k] = options[k];
}

return obj;
}

اینجا کد های اول دوم به چه درد میخورن.
چه چیزایی رو برای ما انتخاب می کنن.
و کد سوم
این کد به چه درد ما میخوره
چه کاری انجام میده
این کد تو jquery شبیه چه تابعی است.
ممنون

darkcms

سه شنبه 27 اسفند 1392, 07:27 صبح

با سلام و درود.
تابع document.querySelector برای تعیین اولین عنصر مورد نظر در صفحه توسط مقدار کوئری می باشد.
به طور مثال می خواهیم اولین عنصری که دارای آی دی هدر (id=header) می باشد را انتخاب کرده و سپس ارتفاع و رنگ پس زمینه اش را به ترتیب 100 پیکسل و قرمز تعیین کنیم:

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="header"></div>
<script>
document.querySelector("#header").style.height = "100px"
document.querySelector("#header").style.backgroundColor = "red"
</script>
</body>
</html>
یا این که می خواهیم اولین عنصری که عنوان آن هدر می باشد را به کنترل درآوریم:

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div title="header"></div>
<script>
document.querySelector("div[title=header]").style.height = "100px"
document.querySelector("div[title=header]").style.backgroundColor = "red"
</script>
</body>
</html>
و اما تابع document.querySelectorAll! این تابع دیگر اولین عنصر را انتخاب نمی کند بلکه تمامی عنصر هایی که توسط مقدار کوئری شناخته می شوند را بر می گزیند و فقط تنها فرق آن این است که باید اولین عنصر یا دومین عنصر یا ... را مشخص کنیم:

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<div id="header"></div>
<div title="header"></div>
<script>
document.querySelectorAll("#header")[0].style.height = "100px"
document.querySelectorAll("#header")[0].style.backgroundColor = "red"

document.querySelectorAll("div[title=header]")[0].style.height = "100px"
document.querySelectorAll("div[title=header]")[0].style.marginTop = "10px"
document.querySelectorAll("div[title=header]")[0].style.backgroundColor = "blue"
</script>
</body>
</html>
به امید فردایی بهتر!:لبخندساده: