отфильтровать DOM = элементы
Привет! Как отфильтровать нужные элементы? Чтобы возвращало только элементы-потомки, соответствующие селектору?
_init_.prototype.childrenFilter = function(el) {
var kids = [];
for (var i = 0; i < this.s.length; i++) {
for (var c = this.s[i].firstChild; c != null; c = c.nextSibling)
if (c.nodeType === 1) kids.push(c);
}
var filterKids = [];
for(var i = 0; i < kids.length; i++){
if(_A_(el) == _A_(kids[i])){
filterKids.push[kids[i]];
console.log(filterKids[i])
}
//for(; i<filterKids.length; i++)
//this.s[i] = filterKids[1];
}
return _A_(filterKids);
}
|
В современных браузерах есть matches/matchesSelector. С остальными придётся посношаться.
|
sash003,
Приведите HTML код к данному скрипту (сломаешь глаза разбираться) и краткое описание нужных деяний |
sash003,
_init_.prototype.childrenFilter = function(el) {
var kids = [];
for (var i = 0; i < this.s.length; i++) {
var arr = Array.prototype.map.call(this.s[i].querySelectorAll(el), function(el) {
return el
});
for (var c = this.s[i].firstChild; c != null; c = c.nextSibling)
if (c.nodeType === 1 && arr.indexOf(c) != -1) kids.push(c);
}
return _A_(kids) ;// подумай что делать если массив пустой
}
|
Не верю я в нужность такой структуры, хорошо б узнать задачу и HTML
Ибо тут сосед унитаз к полу приклеивал жидкой сваркой несколько часов, кады он на два болта ставится за десять мин с хорошей дрелью |
Deff,
собирал по кускам творения sash003, может у него иной комплект. нажимать кнопку показать не рекомендуется для душевного спокойствия.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a{
height: 50px;
background-color: #0000CC;
color: rgb(153, 255, 255);
font-size: 28pt;
}
</style>
</head>
<body>
<p>
<a href="#">рррррррр</a></p><br><div><a href="#">рррррррр</a></div><div><a href="#">рррррррр</a><a href="#">рррррррр</a></div>
<script>
function _init_(el){
this.s = typeof el == "string" ? document.querySelectorAll(el) : el.length ? el : [el];
}
// главная и самая сложная функшн
function _A_(el){
return new _init_(el)
}
_init_.prototype.css = function(obj){
if(typeof obj === 'object'){
for (var e = 0; e < this.s.length; e++){
for (i in obj){
this.s[e].style[i] = obj[i];
}
}
return this;
}
else {
if(obj === 'width') return this.s[0].offsetWidth;
if(obj === 'height') return this.s[0].offsetHeight
else return this.s[0].style[obj] || getComputedStyle(this.s[0])[obj];
}
}
_init_.prototype.attr = function(){
}
_init_.prototype.slideUp = function (duration){
var self = this;
this.css({'overflow' : 'hidden'});
var height = parseInt(this.css('height'));
for(var i = 1; i <= height ; i++){
(function(i){
setTimeout(function(){
self.css({'height' : (height-i)+'px'}); // this.css is not a function. хотя overflow устанавливает перед этим
}, i*duration/height);
})(i);
}
return this;
}
// установка обработчиков
_init_.prototype.on = function(event, func, param){
for(var i = 0; i < this.s.length; i++){
addEvent(this.s[i], event, func, param);
}
}
_init_.prototype.html = function(html){
for(var i = 0; i < this.s.length; i++){
this.s[i].innerHTML = html
}
}
function addEvent(elem, type, handler, param){
param = param || false;
handler.bind(elem)
if(elem.addEventListener){
elem.addEventListener(type, handler, param);
} else {
elem.attachEvent('on'+type, handler);
}
return false;
}
function fn(n)
{
return function() {
_A_(this).css({'backgroundColor' : 'red'})
_A_(this).html(n++); // чтобы так можно было делать
}
}
_init_.prototype.children = function() {
var kids = [];
for (var i = 0; i < this.s.length; i++) {
for (var c = this.s[i].firstChild; c != null; c = c.nextSibling)
if (c.nodeType === 1) kids.push(c);
};
return _A_(kids);
}
_init_.prototype.childrenFilter = function(el) {
var kids = [];
for (var i = 0; i < this.s.length; i++) {
var arr = Array.prototype.map.call(this.s[i].querySelectorAll(el), function(el) {
return el
});
for (var c = this.s[i].firstChild; c != null; c = c.nextSibling)
if (c.nodeType === 1 && arr.indexOf(c) != -1) kids.push(c);
}
return _A_(kids) ;
}
_A_('body').childrenFilter('div').css({'backgroundColor' : 'red'}).html('hhhh')
//var x = _A_("p");
//x.slideUp(1000)
</script>
</body>
</html>
|
а можно мне объяснить зачем вобще нужно делать через прототипы?
почуме делают так
*!*_init_.prototype.on*/!* = function(event, func, param){
for(var i = 0; i < this.s.length; i++){
addEvent(this.s[i], event, func, param);
}
}
а не так?
*!*_init_.on*/!* = function(event, func, param){
for(var i = 0; i < this.s.length; i++){
addEvent(this.s[i], event, func, param);
}
}
|
Цитата:
|
рони,
Как всегда, работает! Благодарю :) Я б в жизни не додумался |
Цитата:
|
sash003,
Цитата:
return kids.length ? _A_(kids) : falseи так везде
function _init_(el){ if (!el) return
|
Знаешь, оно просто ничего не делает когда не находит, возвращает предыдущий просто. боюся лезть чтото менять, хотя раз ты говоришь, сделаю :)
|
рони,
Зацени :)
/* пишем аякс-функцию */
function ajax(obj){
try{var xhr = new XMLHttpRequest()
} catch(e1){try{
xhr = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e2){try{
xhr = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e3){ xhr = false
}
}
}
obj.type = obj.type || "GET" ;
if(obj.type === 'POST'){
var params = '';
for(i in obj.data){
params += i + '=' + obj.data[i] + '&';
}
params = params.slice(0, -1);
xhr.open("POST", obj.url, true);
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
//xhr.setRequestHeader("Content-length", params.length);
//xhr.setRequestHeader("Connection", "close");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
obj.success(this['response' + obj.dataType]);
}
else console.log( "Ajax error: " + this.statusText);
}
xhr.send(params);
}
else if(obj.type === "GET"){
var params = '?';
for(i in obj.data){
params += i + '=' + obj.data[i] + '&'
}
params = params.slice(0, -1);
params += "&nocache=" + Math.random() * 1000000
//console.log(params);
xhr.open("GET", obj.url + params, true);
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200){
obj.success(this['response' + obj.dataType]);
}
else console.log( "Ajax error: " + this.statusText)
}
xhr.send(null);
}
}
ajax({
url : './test_ajax.php',
type: 'POST',
dataType: 'Text',
data: {name: 'sash', _data_ : 'true'},
success: function(response){
document.getElementById('response').innerHTML =
response;
}
});
|
Цитата:
|
KosBeg, сенк ю :)
Теперь надо придумать как сделать чтобы можно было делать загрузку файлов как у Дениса на сайте http://incode.pro/jquery/ajax-na-pra...ka-fajlov.html contentType: false, // важно - убираем форматирование данных по умолчанию processData: false, // важно - убираем преобразование строк по умолчанию Сделать проверку на тип данных (обьехт, строка) и ещё подскаж что забыл :) |
Полный вариант, не супер но сойдёт
function ajax(obj){
try{var xhr = new XMLHttpRequest()
} catch(e1){try{
var xhr = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e2){try{
var xhr = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e3){var xhr = false
}
}
}
obj.type = obj.type || "GET" ;
if(obj.type === 'POST'){
xhr.open("POST", obj.url, true);
var params = '';
if (typeof obj.data === 'string')
params = obj.data;
else if(typeof obj.data === 'object'){
if(obj.contentType === false){
params = obj.data;
console.log(params);
}
else{
for(var i in obj.data){
params += i + '=' + obj.data[i] + '&';
}
params = params.slice(0, -1);
console.log(params)
xhr.setRequestHeader("Content-type",
"application/x-www-form-urlencoded");
}
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
obj.success(this['response' + obj.dataType]);
}
else console.log( "Ajax error: " + this.statusText);
}
xhr.send(params);
}
else if(obj.type === "GET"){
var params = '?';
if (typeof obj.data === 'string')
params += obj.data;
else if(typeof obj.data === 'object'){
for(var i in obj.data){
params += i + '=' + encodeURIComponent(obj.data[i]) + '&'
}
params = params.slice(0, -1);
params += "&nocache=" + Math.random() * 1000000;
}
xhr.open("GET", obj.url + params, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.onreadystatechange = function() {
if(this.readyState == 4 && this.status == 200){
obj.success(this['response' + obj.dataType]);
}
else console.log( "Ajax error: " + this.statusText)
}
xhr.send(null);
}
}
document.forms.f1.onsubmit = function(e){
e.preventDefault();
var formObj = {};
var elem = document.forms.f1;
var inputs = elem.querySelectorAll('[name]');
for(var i = 0; i < inputs.length; i++){
formObj[inputs[i].name] = inputs[i].value;
if(window.FormData) {
var formData = new FormData(document.forms.f1);
}
}
// попытка отправки
ajax({
url : './test_ajax.php',
type: 'POST',
dataType: 'Text',
contentType : false,
data:formData,//{text: document.querySelector('[name=text]').value, _data_ : 'true'},
success: function(response){
document.getElementById('response').innerHTML =
response;
}
});
}
|
Если есть свой ресурс с доступом к PHP, нарисовать простенький проксер GET запросов и дополнить либу кроссдоменным GET - Аяксом, часто востребовано. К примеру поиск картинок в гугле, или чтение RSS с ресурсов
|
Цитата:
как на бесплатный хостинг - очень даже неплохо, или например это - http://aws.amazon.com/ru/free/ Цитата:
Цитата:
|
KosBeg,
Я давно с PHP не баловался, помню только фичу, что нун трансформировать(через PHP) полученный прокси-запросом код страницы(Если он HTML) в UTF-8, если исходный в windows-1251, остальное вроде как в пяток строк. Начни с гугла, типо: - простое проксирование GET-запросов на PHP |
| Часовой пояс GMT +3, время: 09:26. |