outer 尺寸 对象 层级 ani 入门 fontsize fun click
http://www.cnblogs.com/cwp-bg/p/7633623.html
注意点1:使用jquery必须先导入函数库文件,使用一个单独的script标签,结束代码另起一行script。
- <script src="./jquery-1.12.4.js"></script>
- <script>js的代码</script>
注意点2:在加载完毕后需要判断是否加载成功,一般使用length属性判断输出,如果不成功,length输出0;成功输出非0.
- <script>
- $(function() {
- $div = $(".box");
- console.log($Div.length);
- })
- </script>
说明:选择器和CSS选择器的写法相同。
- $(document) //选择整个文档对象
- $(‘li‘) //标签选择元素
- $(‘#myId‘) //通过id选择元素
- $(‘.myClass‘) // 通过class属性选择
- $(‘input[name=first]‘) // 选择name属性等于first的input元素,通过行内属性和标签结合选择
- $(‘#ul1 li span‘) //层级选择
- $(‘ul li:first‘) //选择ul元素下的第一个li
- $(‘ul li:odd‘) //选择ul元素下的li的奇数行
- $(‘ul li:eq(2)‘) //选择ul元素下的第3个li
- $(‘ul li:gt(2)‘) // 选择ul元素下的第三个之后的li
- $(‘ul li:lt(2)‘) // 选择ul元素下的第三个之前的li,不包括第三个
- $(‘div:visible‘) //选择可见的div元素
- $(‘div‘).has(‘p‘); // 选择包含p元素的div元素
- $(‘div‘).not(‘.myClass‘); //选择class不等于myClass的div元素
- $(‘div‘).filter(‘.myClass‘); //选择class等于myClass的div元素
- $(‘div‘).first(); //选择页面中第1个div元素
- $(‘div‘).eq(5); //选择角标是5的div元素
- $(‘div‘).prev(‘p‘); //选择div元素前面的第一个p元素
- $(‘div‘).next(‘p‘); //选择div元素后面的第一个p元素
- $(‘div‘).closest(‘div‘); //选择离div最近的那个div父元素
- $(‘div‘).parent(); //选择div的一级父元素
- $(‘div‘).children(); //选择div的所有子元素
- $(‘div‘).siblings(); //选择div的同级元素
- $(
- ‘div‘).find(
- ‘.myClass‘); //选择div内的class等于myClass的所有元素
- $(‘#div1‘).animate({
- "width":300,
- "height":300
- },1000,‘swing‘,function(){
- alert(‘done!‘);
- });
注意1:属性名必须添加引号,多个属性用逗号隔开值设置如上,可以是300,"300","300px",程序可以识别。
注意2:如果只写第一个参数,则默认500ms,匀速运动,没有执行后动作。
扩展:点击按钮返回顶部页面的通用方法
- $("html,body").animate({
- "scrollTop": 0
- });
- $(‘#btn1‘).click(function() {});
说明:参数可以是匿名函数,也可以是命名函数;但如果需要传参,则必须使用匿名函数。
- $(window).scroll(function(){
- ......
- })
与之相关的有两个常用的获取滚动距离的方法:
- $(document).scrollTop(); //获取距离文档顶部的距离
- $(document).scrollLeft();//获取距离文档左边的距离
注意:滚动事件只有在文档的高度或宽度大于窗口的宽高时才会生效。
- // 获取div的样式
- $("div").css("width");
- //设置div的样式
- $("div").css("width","30px");
- $("div").css({fontSize:"30px",color:"red"});
注意点1:设置样式时,如果只有一个样式,用逗号隔开,不是冒号;当多个样式设置时才用冒号。
注意点2:选择器获取的是一个选择集,那么获取到的样式为第一个标签的样式。
- $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
- $("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
- $("#div1").removeClass("divClass divClass2") //移除多个样式
- $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
注意:addClass()方法中的括号内直接写类名,不再是选择样式。
- // 取出html内容
- var $htm = $(‘#div1‘).html();
- // 设置html内容
- $(‘#div1‘).html(‘ < div > xxx < /div>‘);/
注意:取出时会将这个标签下的所有的html内容输出,包括标签本身。
- // 取出文本内容
- var $htm = $(‘#div1‘).text();
- // 设置文本内容
- $(‘#div1‘).text(‘添加文字‘);
注意:设置文本内容时,加入标签是没有作用的,标签会被当做文本进行解析。
- // 取出按钮的值
- var $value = $(‘input‘).attr(‘value‘);
- // 设置按钮的值
- $(‘input‘).attr({ "value":"按钮" });
- // 取出图片的地址
- var $src = $(‘#img‘).prop(‘src‘);
- // 设置图片的地址和alt属性
- $(‘#img‘).prop({src: "test.jpg", alt: "" });
注意:以上attr方法和prop方法使用方式一样;但是attr可以获取系统不存在的自定义的属性,而prop获取不到;所有的属性需要用引号包裹,否则报错。
- $("div").width() // 获取元素width
- $("div").height() //获取元素height
- $("div").innerWidth() //获取包括padding的width
- $("div").innerHeight() //获取包括padding的height
- $("div").outerWidth() //包括padding和border的width
- $("div").outerHeight()//包括padding和border的height
- $("div").outerWidth(true)//包括padding和border以及margin的width
- $("div").outerHeight(true)//包括padding和border以及margin的height
- $(window).width();
- $(window).height();
- $(document).width();
- $(document).height();
- var $n1 = $("div").offset();
- $left = $n1.left; # 获取相对页面左边的距离
- $top = $n1.top; # 获取相对页面上边的距离
- var $n1 = $("div").offsetParent();
- $left = $n1.left; # 获取相对父类左边的距离
- $top = $n1.top; # 获取相对父类上边的距离
- $(‘#div1‘).fadeIn(1000, ‘swing‘,
- function() {
- alert(‘done ! ‘);
- }); //淡入,事件1秒,渐变,参数和animate相仿
- fadeOut()淡出fadeToggle()切换淡入淡出
注意:下面的动画方法和这里的参数一样。
- hide() 隐藏元素
- show() 显示元素
- toggle() 切换显示状态,参数和上面相同
- slideDown() 向下展开
- slideUp() 向上卷起
- slideToggle() 展开和卷起切换
说明:以上的效果一般使用在点击事件中。
- $(‘div‘).each(function(i,j){
- ...
- })
说明:当一次获取了多个div时,如果需要对每个元素进行不同的有规律的操作,使用each方法,内部用$(this)代表循环到的那个元素。
循环方法中的function匿名函数中携带了两个默认参数,如上代码,i代表当前div的角标值,j代表当前div元素本身;这两个参数可以用任何变量表示。
- $div.each(function(i, j) {
- $(this).animate({
- "background": "blue",
- });
- });
说明:该代码欲要实现每个div背景色逐个变蓝,实际不会起任何的作用;但对于宽高等属性是起作用的。
- $lis.click(function() {
- //此时的$(this)代表$lis选择集下的当前点击的$lis
- $(this).prevAll().each(function() {
- //$(this)代表点击的$lis.prevAll(),this代表的元素发生了改变
- $(this).animate({
- "left": 21 * $(this).index(),
- })
- })
- })
前端笔记----jquery入门知识点总结 (转)
来源: http://www.bubuko.com/infodetail-2358077.html