元素获取

基于jQuery

//基于属性id。仅获取零个或一个
$("#id_value")
//基于属性class。可获取零个、一个、多个
$(".class_value")
//基于属性name。可获取零个、一个、多个
$("#name_value")
//基于元素类型。可获取零个、一个、多个
$("div")

基于原生

//基于属性id。仅获取零个或一个
var f_element1 = document.getElementById('f_id');
//基于属性class。可获取零个、一个、多个
var f_element2 = document.getElementsByClassName("f_class");
//基于属性name。可获取零个、一个、多个
var f_element3 = document.getElementsByName("f_name");

注意：Elements带“s”,因此获取的是一个数组。所以使用时也应指明是针对数组中的哪一个操作！否则报错。

元素创建

基于原生

//基于元素div创建并获取div元素本身
var cur_element = document.createElement('div');

设置元素属性

基于原生

x=document.getElementById("demo3") // 找到元素
x.style.color="#ff0000";          // 改变样式
//基于属性id
cur_element.setAttribute('id', userID + 'div');

设置元素的属性style

基于原生

cur_element.setAttribute('style', 'width:100px; position: fixed; top:100px; left:100px;display: block;z-index: 2147483647;');

基于jQuery

var screen_height = window.screen.height;
var screen_width = window.screen.width;
$(".player").attr("style","position:relative;width:"+screen_width+";height:"+screen_height+";margin-top: 8px;");
$(".player video").attr("style","width:"+screen_width+";height:"+screen_height+";");

设置元素类

基于原生

定义class

//方法一：添加属性class并设置值为classA。会清空原有class的值
cur_element.className = 'classA';
//方法二
cur_element.setAttribute('class','letter_send_ok');
//追加类classB
cur_element.className += 'classB';
//删除类classB

基于jQuery

//删除类
$(".room_control_in_player").removeClass('hide');
//追加类
$(".full_screen_ico").addClass('hide');

获取元素的值

基于原生

var x=document.getElementById("demo2").value;

基于jQuery

$("#demo2").val();

设置元素的innerHTML、值

基于jQuery

//获取值
$("div").text();
$("div").html();
//设置值
$("div").text("element2IdaddConten");

基于原生

var oImg=document.getElementById("img");
var oText=document.getElementById("text");
oImg.src="zuozhu.jpg";
oText.innerHTML="佐助";

元素插入

基于jQuery

//一股脑哦
$("p").append("<a href='http://www.baidu.com'>百度链接</a>");

基于原生

f_element1 .appendChild(cur_element );

元素移除

基于jQuery

//基于属性class值移除
$(".classA").remove();