jQuery day02

浏览器中的顶级对象:window
页面中的顶级对象:document

jquery中的顶级对象: jQuery.方法,jQuery.属性 即$.方法,$.方法 -->
  
区别:看后面调用的是dom写法 还是 jq 写法,jq几乎都是方法 没有属性
  
DOM操作麻烦 转jq , jq没有兼容的地方 转dom



选择器 id选择器 $(
"#") $("#btn").click(function(){ this.value = "123"; $(this).val("345"); }); 标签选择器 $("XX") $(function(){ $("p").text("en"); }); .text()方法 == innerText 对象.text()获取 对象.text(value) 隐式迭代 本身没有循环操作,jq内部帮我们循环 类选择器 $(".XX") $("#btn").click(function(){ $(".cls").css("backgroundColor","pink"); }); 交集选择器 $("#btn").click(function(){ $("p.cls").css("backgroundColor","pink"); }); 并列选择器 $("#btn").click(function(){ $("#btn,div.cls,p.cls,ul").css("backgroundColor","green"); }); 层级选择器 $("ul span").css({"backgroundColor":"pink"}); $("ul>span").css({"backgroundColor":"red"}); $("ul~span").css({"backgroundColor":"red"}); 获取后面的兄弟元素 $("ul+span").css({"backgroundColor":"red"}); 获取直接相邻的兄弟元素 索引选择器 :eq(index) :lt(index) :gt(index) $("ul>li:eq(3)").css("background","red"); $("ul>li:lt(3)").css("background","red"); $("ul>li:gt(3)").css("background","red"); $("ul>li:gt(5):lt(3)").css("background","red");

 

posted @ 2018-12-01 22:14 GT_Lee 阅读(...) 评论(...) 编辑 收藏