一、 css选择器
1.查找元素的方法按照
$app1 = $("#app")/$(".app")/$("div/li/ul");
形式来写
2.支持多级查询:
形式大概在:
$app1 = $("#app,.app1,#app2")
$app1 = $(".app>app1")//子代选择器
$app1 = $("#app app1")//后代选择器
3.用jq给css 添加样式
css()
即
$app.css("background","red")
4.current 当前
5 .next() 返回后一个同级元素
<li class="app12"></li>
<li class="app13"></li>
$(".app12").next();
这个返回的实际上就是第二个li;
6.parent()取相应的父元素
<div id='app'>
<li class="app12"></li>
<li class="app13"></li>
</div>
$(".app12").parent();
这个找到的实际上就是#app这个元素
7.siblings() 取同级元素的集合(不包括自己本身)
<li class="app12"></li>
<li class="app13"></li>
<li class="app14"></li>
$(".app12").siblings()
实际上去得的是13,14两个li,它和next()的区别在于 一个是去集合另一个是取一个元素
4. children()取得所有子元素
它可以有参数 结果是取得符合条件的子代元素
<ul id="ul1">一
<li class="li1" id="siblings">1</li>
<li class="li1">2</li>
<li class="li1">3</li>
<li class="li1">4</li>
<li class='li2'></li>
</ul>
$("#ul1").children().css('background',"red");//取得的是前四个
$("#ul1").children('.li2').css("background","yellow"//取得是最后一个
5.remove()
6.toggleClass() 函数
<div id="app" class="div1">
</div>
没有类则是创建一个类,如果有则反选。
例如$("#app").toggleClas(“div1“);
7.:eq()选择器
例如
var $app = $(".app:eq(0)").html();
eq选择类名是 app的dom元素中的某一个 ,这个是指从0 开始到n-1
传-1取得是最后一个dom元素。
html()函数,是jq的语法,不穿函数的时候用来取得这个dom函数的值,传值的时候会覆盖原有的html结构可以是<li></li>这种东西。
执行的东西应该是一个$元素,而不是一个$数组
8.:even
例如
var $app = $(".app:even").css("background,red");
这个函数选择的是所有奇数的dom元素,1,3,5,7,需要注意的是这个肯定会回传一个数组,所以不能使用像html()这种只能操作一个的函数。
9.属性选择器:
<ul>
<li name="aa">1</li>
<li name="aabb">2</li>
<li name="bbaa">3</li>
<li name = "aa-bb">4</li>
</ul>
1.var $xianshi = $("#app ul li[name=aa]").css("background","red");//选中属性值也就是name 等于aa 的dom元素 也就是第一个
2.var $xianshi = $("#app ul li[name*=aa]").css("background","red");//选中所有含有aa的元素 三个都有
3.var $xianshi = $("#app ul li[name~=aa]").css("background","red");
选中 含有aa这个单词的元素?
4. var $xianshi = $("#app ul li[name$=aa]").css("background","red")//
选中以aa为结尾的 dom元素
5. var $xianshi = $("#app ul li[name^=aa]").css("background","red")//
选中以aa为开头的dom元素
6.var $xianshi = $("#app ul li[name!=aa]").css("background","red")//
选中不含有aa 的dom元素
7.var $xianshi = $("#app ul li[name|=aa]").css("background","red")
//选中以aa 为前缀的dom 元素?
10.
1.$("#div h1:first-child")
这句话的意思是选中div下面的第一个孩子而且必须是h1。
2.$("#div h1:first of type")
选中div下第一个类型是h1的dom 元素
3.$("#div h1:nth-child(2n)")选择所有偶数
4.$("#div h1:nth-child(2n+1)")选择所有奇数
二jq 扩展选择器
1.:animated
选择正在执行动画效果的dom元素
$("div:animated").toggleClass("colored");
2.eq()选择器
例如
var $app = $(".app:eq(0)").html();
eq选择类名是 app的dom元素中的某一个 ,这个是指从0 开始到n-1
传-1取得是最后一个dom元素。
html()函数,是jq的语法,不穿函数的时候用来取得这个dom函数的值,传值的时候会覆盖原有的html结构可以是<li></li>这种东西。
执行的东西应该是一个$元素,而不是一个$数组
3.:even
例如
var $app = $(".app:even").css("background,red");
这个函数选择的是所有奇数的dom元素,1,3,5,7,需要注意的是这个肯定会回传一个数组,所以不能使用像html()这种只能操作一个的函数。
4.:odd
var $app = $(".app:odd").css("background,red");
选择所有偶数的dom元素。
5.:first
var $app = $(".app:first").css("background","red");
匹配第一个元素
6. :gt(index)
var $div1 =$("#div1 li:gt(0)");
$div1.each(function(){
$(this).css("background","green");
});
索引从零开始,所以这个是操作所有大于index(0+1)的元素。
7.:header
var $div1 = $("div1:header")
选择所有header标题元素 类似于h1,h2,h3,h4。
8.:lang(lang)
$( "div:lang(es-es)" ).addClass( "spain" );
选择指定语言的所有元素
对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。
9.:last
$("div:last").css("background","red");
选择最后一个div
10.:it(index)
var div1 = $("div:it(0)");
$div1.each(function(){
$(this).css("background","green");
});
用于操作所有小于index+1的dom元素。
11.:not(selector)
$("input:not(:checked) + span").css("background-color", "yellow");
选择除了选定元素之外的其他元素。不推荐使用没有.not()好用。
12.:html
选择该文档的根元素
在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素
13.:target
选择由文档URI的格式化识别码表示的目标元素
如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URI http://example.com/#foo, $( "p:target" ),将选择<p id="foo">元素。
14.:empty
var $div1 = $("#div1 li:empty").css("background","red");
选择空元素的jq元素
15:contains(text)
var $div1 = $("#div1 li:contains(2)").css("background","red");
选择内容中含有text 的所有jq元素
15.:parent
var $div1 = $("#div1 li:parent").css("background","red");
选择任何有子元素或者文本的父元素
16.:hidden
选中所有隐藏元素
17.:visible
选中所有可见元素
18.:button
选中所有按钮
19.:checkbox
选中所有复选框的jq元素
20.:checked
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
$(":checked").val("haha")
选择所有被选中的单选框,并且单选框不能添加背景和边框,用于单选框和复选框,下拉框用:selected
21.js 对象
分三种{
1.内置对象
2.dom对象
3.自定义对象
}
jq对象 就是个自定义对象,但可以当做数组来操作。
22. dom 对象和jq 对象互换
1.dom对象 换成jq 对象
var oBtn = document.getElementById('app');
$btn = $("oBtn")
console.log($btn);
2.jq 对象转成 dom 对象
两种方式
1..get(0) 因为jq 对象相当于一个数组
var $Btn = $("#app");
console.log($Btn.get(0));
或者
console.log($Btn[0]);
23.API 函数 就是那些语法
24.js 命名规范
1.o 代表原生的
2.$代表jq 对象
25.属性选择器:
<ul>
<li name="aa">1</li>
<li name="aabb">2</li>
<li name="bbaa">3</li>
<li name = "aa-bb">4</li>
</ul>
1.var $xianshi = $("#app ul li[name=aa]").css("background","red");//选中属性值也就是name 等于aa 的dom元素 也就是第一个
2.var $xianshi = $("#app ul li[name*=aa]").css("background","red");//选中所有含有aa的元素 三个都有
3.var $xianshi = $("#app ul li[name~=aa]").css("background","red");
选中 含有aa这个单词的元素?
4. var $xianshi = $("#app ul li[name$=aa]").css("background","red")//
选中以aa为结尾的 dom元素
5. var $xianshi = $("#app ul li[name^=aa]").css("background","red")//
选中以aa为开头的dom元素
6.var $xianshi = $("#app ul li[name!=aa]").css("background","red")//
选中不含有aa 的dom元素
7.var $xianshi = $("#app ul li[name|=aa]").css("background","red")
//选中以aa 为前缀的dom 元素?
26.
1.$("#div h1:first-child")
这句话的意思是选中div下面的第一个孩子而且必须是h1。
2.$("#div h1:first of type")
选中div下第一个类型是h1的dom 元素
3.$("#div h1:nth-child(2n)")选择所有偶数
4.$("#div h1:nth-child(2n+1)")选择所有奇数
27. 我有一个ul 里面各种LI li不确定多少个,把他横过来,根据设备宽度不同,间隙相同,所有li 均分,第一列在最左边 ,最后一列在最右边......
1. 检测不同的设备用css3响应式设计
28.each()函数
var $div1 =$("#div1 li");
$div1.each(function(){
$(this).css("background","green");
});
用来遍历jq元素但是需要用this来指向,并且那个$一定不要忘,是$(this)并不是this。
30..val(value)函数
想一个jq元素中添加value 属性 value=value(自己设的东西)。
31.1.toggle 函数
不传参数的时候
toggle();
$app.toggle();
改变这个元素的显示或者隐藏
toggle可以传递一个函数来控制是隐藏还是显示
$app.toggle(true);
这个参数是一个布尔值