jQuery动画与ajax

题目1.Jquery中, $(document).ready()是什么意思?和window.onload 的区别? 还有其他什么写法或者替代方法?

  • $(document).ready()方法:为防止文档在完全加载之前运行Jquery代码,若在文档未完全加载前就运行函数,操作可能失败.必须在文档加载完后执行操作,可使用ready事件,作用相当于把js写到body末尾.
    $(document).ready(function(){ });
    可简写为:
    $(function(){ })
  • window.onload:必须等网页中所有的元素全部加载完毕才能执行.不能同时写多个,否则后面覆盖前面.

题目2.$node.html()和$node.text()的区别?

  • $node.html(),返回所选择元素内的html内容,包含html标签和文本内容
  • $node.text(),返回所选择元素内的文本内容,不包含html标签,只包含文本内容

题目3.$.extend 的作用和用法?

  • $.extend()将多个对象合并到一起,可以传入多个参数。$.extend([deep,] target,…)。[deep,]为布尔值默认情况不是深拷贝,可设置true为深拷贝
//定义一个对象
var obj={
    name:'gaoyang',
    age:25,
    sex:'man'
};
//定义一个新对象
var newObj={
    name:'jirengu',
    age:30
};
//extend方法接受多个参数,并且第一个对象被覆盖
$.extend(obj,newObj,{
    name:'gg',
    age:25,
    like:'eat'
});
console.log(obj);
//object{
//age:25,
//like:"eat",
//name:"gg",
//sex:"man"
//
}

题目4.JQuery 的链式调用是什么?

$('#ct').css('color','blue').show(400).hide();

题目5.jquery 中 data 函数的作用?




    
    task26


题目6写出以下功能对应的 Jq 方法:

$node.addClass('active');//添加一个class
$node.removeClass('active');//删除一个class

2.展示元素$node, 隐藏元素$node

$node.show();//展示
$node.hide();//隐藏

3.获取元素$node 的 属性: id、src、title, 修改以上属性

$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改

4.给$node 添加自定义属性data-src

$node.attr("data-src",'str')

5.在$ct 内部最开头添加元素$node

$(".ct").prepend($node);

6.在$ct 内部最末尾添加元素$node

$(".ct").append($node);

7.删除$node

$(node).remove();

8.把$ct里内容清空

$node.empty();

9.在$ct里设置 html

$ct.html('

')

10.获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

11.获取窗口滚动条垂直滚动距离

$(window).scrollTop()

12.获取$node到根节点水平、垂直偏移距离

$node.offset()

13.修改$node 的样式,字体颜色设置红色,字体大小设置14px

$node.css({"color":"red","font-size":"14px"})

14.遍历节点,把每个节点里面的文本内容重复一遍

$node.each(function(){ console.log($(this).text()) })

15.从$ct 里查找 class 为 .item的子元素

$(".ct").find(".item")

16.获取$ct 里面的所有孩子

$(".ct").children()

17.对于$node,向上找到 class 为’.ct’的父亲,在从该父亲找到’.panel’的孩子

$node.parents(".ct").find(".panel")

18.获取选择元素的数量

$node.length;
$node.size();

19.获取当前元素在兄弟中的排行

$node.index();

题目7

1.用jQuery实现以下操作当点击$btn 时,让 $btn 的背景色变为红色再变为蓝色

$('.btn').on('click',function(){
    setTimeout(function(){
      $('.btn').css('background-color','red')
    },0)
    setTimeout(function(){
      $('.btn').css('background-color','blue')
    },500)
    setTimeout(function(){
      $('.btn').css('background-color','red')
    },1000)
  })

2.当窗口滚动时,获取垂直滚动距离

$(window).scrollTop()

3.当鼠标放置到$div 上,把$div 背景色改为红色,移出鼠标背景色变为白色

$('div').on('mouseleave',function(){
      $(this).removeClass('active')
  })
  $('div').on('mouseenter',function(){
      $(this).addClass('active')
  })

4.当鼠标激活 input 输入框时让输入框边框变为蓝色,当输入框内容改变时把输入框里的文字小写变为大写,当输入框失去焦点时去掉边框蓝色,控制台展示输入框里的文字


var $input = $('input');
  $input.focus(function(){
    $(this).addClass('active')
  })
  $input.blur(function(){
    $(this).removeClass('active')
    console.log($(this).val())
  })
  $input.keyup(function(){
    $(this).val( $(this).val().toUpperCase())
  })

5.当选择 select 后,获取用户选择的内容


 



题目8 用 jQuery ajax 实现如下效果。`当点击加载更多会加载数据展示到页面效果预览87

//router.js
app.get('/getNews', function(req, res) {
    var page = parseInt(req.query.page);
    var len = parseInt(req.query.len);
    var arr = [];
    for(var i =  page*len;i


  
  gaoyang
  


  

你可能感兴趣的:(jQuery动画与ajax)