美文网首页
JavaScript,Jquery,Mui选择,获取创建设置元素

JavaScript,Jquery,Mui选择,获取创建设置元素

作者: daoqing99 | 来源:发表于2017-02-16 14:46 被阅读0次
  1. 选择元素
//jq
$('.el');
//js   
document.querySelector("div");
div.querySelectorAll('.el');
//mui
mui(".el")[0];
  1. 父、兄弟元素
//jq
$('.el').parent();
$('.el').prev();
$('.el').next();
$('.el').last();
$('.el').first();
//js
document.querySelector('.el').parentNode;
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling; 
document.querySelector(".el").lastElementChild;
document.querySelector(".el").children[0];
  1. 获取元素文本
//jq
$('.el').html();
$('.el').val();
$('.el').text();
$(el).replaceWith(string);
//js
document.getElementById('el').innerHTML;
document.getElementById('el').value;
document.getElementById('el').textContent
document.getElementById('el').outerHTML = string;
  1. 创建元素
//jq
var newEl = $('
');
//js
var newEl = document.createElement('div');
Set/get属性
//jq
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');
$(el).css('border-width', '20px');
//js
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
document.querySelector('.el').style.borderWidth = '20px';
附加
//jq
$('.el').append($('
'));
//js 
document.querySelector('.el').appendChild(document.createElement('div'));
克隆
//jq
var clonedEl = $('.el').clone();
//js
var clonedEl = document.querySelector('.el').cloneNode(true);
移除
//jq
$('.el').remove();
// js
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
ajax
//jq
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});
//js
// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});
显示和隐藏
//jq
$(el).show();
$(el).hide();
//js
el.style.display = '';
el.style.display = 'none';
是否包含某个 class
//jq
$(el).hasClass(className);
//js
if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);    
添加 Class
//jq
$(el).addClass(className);
//js
if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;
移除class
//jq
$(el).removeClass(className);
//js
// removeClass, takes two params: element and classname
function removeClass(el, cls) {
  var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
  el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
}

如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari这样较现代的浏览器,那么你可以开始使用HTML5的classList功能,它让增加和删除类变得更简单

el.classList.add(className);
el.classList.remove("foo")
el.classList.contains("foo");
el.classList.toggle("active");
插入 HTML
//jq
$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);
//js
el.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(el);
el.insertAdjacentHTML('afterend', htmlString);
获取子节点
//jq
$(el).children();
//js
el.children
Trim
//jq
$.trim(string);
//js
string.trim();

相关文章

  • JavaScript,Jquery,Mui选择,获取创建设置元素

    选择元素 父、兄弟元素 获取元素文本 创建元素 如果你只需要支持像IE10+,Chrome,FireFox,Ope...

  • jQuery对下拉框Select操作总结

    jQuery获取Select元素,并选择的Text和Value: jQuery获取Select元素,并设置的 Te...

  • MUI框架—其他方法

    mui() MUI框架使用CSS选择器获取HTML元素,返回MUI对象的数组。mui("p"):选取所有 元素...

  • 02-JQuery操作DOM

    一、JS获取DOM元素和JQuery获取DOM元素的区别 JavaScript获取的是DOM对象,而Jquery获...

  • jQuery

    jQuery 如何获取元素 jQuery 的链式操作是怎样的 jQuery 如何创建元素 jQuery 如何移动元...

  • jQuery1-004 API-选择器

    1、jQuery基础选择器 1.1、jQuery获取元素的统一方式 通过$('选择器')获取元素,获取的元素以伪数...

  • 2018-09-26

    JQuery03代码笔记 一、元素的创建 二、元素的添加 三、移除的元素 四、设置元素的宽和高 五、获取元素的le...

  • jQuery 功能

    一、jQuery 如何获取元素 jQuery支持通过CSS选择器语法获取到想要操作的元素 也可以是 jQuery ...

  • jQuery基本函数整理

    来源于《15天学会jQuery编程与实战》 jQuery操作HTML 获取内容 获取元素的属性 设置元素的属性 页...

  • jQuery 的一些功能介绍

    【目录】 一、jQuery 如何获取元素二、jQuery 的链式操作是怎样的三、jQuery 如何创建元素四、jQ...

网友评论

      本文标题:JavaScript,Jquery,Mui选择,获取创建设置元素

      本文链接:https://www.haomeiwen.com/subject/sjchwttx.html