操作前端选取元素以及元素操作的一些方法

常用 选择器

• 选择器：

$("input[name='newsletter']")  # 选择所有的name属性等于'newsletter'的input元素
$("li[title='全屏']").click()

CSS 选择器

• 基本选择器：

#mostImportant {color:red; background:yellow;}  #id选择器
#P {color:red; background:yellow;}  #元素选择器
.cl {color:red; background:yellow;}  #类选择器

• 属性选择器：

*[title] {color:red;}
[title]{color:red;}  #等价上面
a[href] {color:red;}

• jQuery CSS 类 选择器：

$(".btn.btn-primary")[0]  # 返回的是列表，选择第一个
$(".btn.btn-primary:not(.btnSubmitQuestion)") # not 是不含有的class属性
$("p.intro") # 所有 class="intro" 的 <p> 元素 
$(".intro")  # 所有 class="intro" 的元素    
$("button.cnb-button").click() #如果只找到一个直接点击 

jQuery 选择器

https://www.cnblogs.com/fanbi/p/7705235.html

1. CSS 类 选择器
$(".btn.btn-primary")[0]  # 返回的是列表，选择第一个
$(".btn.btn-primary:not(.btnSubmitQuestion)") # not 是不含有的class属性

$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
$("a[id^=abc]") 选择a元素，id以abc开头
$("a[id$=abc]") 选择a元素，id以abc结尾
$("a[href*=com]") 选择a元素，href包含com


$("#id") id选择器
$("div[id]") 选择所有含有id属性的div元素
$("div[class='element-header-toggle']").click()  # roboot里面报告点击开
$('#td1,#td2,p').css('color','red'); ,表示或者的关系
$("td[class='element-header-toggle']") = $("td .element-header-toggle") # 这个是等效的用法
$('td[class="td2"][style="word-break:break-all;"]').removeAttr("style");  //移除属性
$('input[name=username]').removeAttr("readonly");//去除input元素的readonly属性
$('[attr1="a1"][attr2="a2"]').css('color','blue'); //选择条件1 attr1="a1" 和 条件2 attr2="a2"的元素，把选择后的颜色变成蓝色
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

//eval 使用
var value2 = {"user_id":"123456","username":"coolcooldool"};
var obj2 = eval(value2); 


////////////实际使用
# QXDM licence去激活
$("span[class='ui-button-text ui-clickable']")[3].click()
$("span[class='ui-button-text ui-clickable']")[4].click()


# roboot里面报告点击开
$("div[class='element-header-toggle']").click() 
 
#颜色变成红色
$('td[class="td2"][style="word-break:break-all;"]').css('color','red'); 

//取值的两种方法
$('td[class="td2"][style="word-break:break-all;"]').text();     #不知道为什么取不到 ,可能是word-break
方法1
$('td[class="td2"]').text();  // 或者 $("td").text(); 
方法2
$("td").each(function () {
      if ($(this).text().startsWith("CQY")){
      console.log($(this).text())
      }  
});


//时间获取
https://www.cnblogs.com/amize/p/13830424.html  //时间获取
var date = new Date().Format("yyyy-MM-dd");

//获取题目相关
$("span[id^='ac_slxxxxx']").text()


#博客园去掉目录（收藏栏）
javascript:(function(){document.getElementById("sideToolbar").style.display ='none';})();

#根据id隐藏元素
$('#mainCnt').style.display ='none'


#table表格删除一行
var tr = this.parentNode.parentNode; // this是td中的a标签
tr.parentNode.removeChild(tr);

DOM 选择器

document.getElementById("intro");
document.querySelector("CSS选择器");
# 博客保存按钮
(function(){  $("button.cnb-button").click() })();                      //$ is not defined 错误
(function(){  document.querySelector("button.cnb-button").click() })(); // 这个可以


var el = document.getElementsByClassName("ui-area-text")[0]
var area_name = el.getAttribute("title")
var area_id = el.getAttribute("data-id").replace(/-/g, "_")
console.log(area_name)
console.log(area_id)

元素操作

- 修改样式
   - DOM
      - setAttribuite("style","margin:0")
      - style.color = "green"
      例子：
            var obj=document.getElementById('id');
            obj.setAttribute('attr_name','attr_value');  // 添加属性：
            obj.getAttribute('attr_name');    // 获取属性值：
            obj.removeAttribute('attr_name');   // 删除属性：


   - jQuery 
      - $("div").css("color ","green")
     
- 文档操作
   - DOM
      - $("id")[0].innerHTML
   - jQuery 
      - $("div").text()
      - $("div").val()   #input 相关

- 属性操作
   - DOM
      - imgEle.src="..."
   - jQuery 
      - $("img").attr("scr","...")


- 文档处理
   - DOM
      - createElemet
      - node.appendChiled(newnode)
   - jQuery 
      - $("div").append(xx)