jquery入门

说说库和框架的区别?

库:是一个很多小工具的集合,可以用此工具简化你的代码。
框架:为解决一个(一类)问题而开发的产品,开发者按照框架的设计去做一些事

jQuery 能做什么?

  1. 可以做和原生js相同的事情,可以简化js代码
  2. 可以解决ie的兼容性问题
  3. jQuery库容易扩展而且不断有新插件面世增强它的功能

jquery 对象和 DOM 原生对象有什么区别?如何转化?

jquery对象就是用jQuery的方法进行获取的对象,而原生DOM对象就是用javaScript的方法进行获取的对象。
jQuery对象就只能使用jQuery的方法,原生DOM对象只能使用原生DOM的方法
如何转换

  1. 获取jQuery对象
    $('#btn')
    获取DOM对象
    document.getElementById('btn')
  2. jQuery转换成DOM
    $('#btn')[0]
    DOM转换成jQuery
    $('dom对象')

jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

bind:为一个元素绑定一个或多个事件,并规定当这些事件发生时运行的函数。
unbind:为一个元素解绑其身上所绑定的事件,并规定当这些事件发生时运行的函数。
delegate:为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
live:为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
on和off是以上四种方法的替代品,该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
on替代了bind,delegate,live
off替代了unbind

<body>
  <button id="btn">submit</button>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    $('#btn').on('click',function(){
      console.log(this)
    })
  </script>
</body>

事件代理:事件委托或者事件代理,想让div 下面所有的span绑定事件,可以把事件绑定到div上

$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

jquery 如何展示/隐藏元素?

<body>
  <p>nihao</p>
  <button id='show'>show</button>
  <button id="hide">hide</button>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var $p=$('p')
    $('#show').on('click',function(){
      $p.show();
    })
    $('#hide').on('click',function(){
      $p.hide();
    })
  </script>
</body>

jquery 动画如何使用?

$(selector).animate(styles,speed,easing,callback)

<body>
  <p style="border:1px solid red";>nihao</p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    var $p=$("p")
    $p.on('click',function(){
      $p.animate({
        height:'100px'
      },1000)
    })
  </script>
</body>

如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

使用$().html()获取html内容,$().text()获取文本内容
括号里如果有内容则为设置
如果括号内没有内容则为获取

<body>
  <button id="htm">htm</button>
  <button id="text">text</button>
  <p><span>hello</span>world</p>
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    $('#htm').on('click',function(){
      console.log($('p').html())
      $('p').html('<span>world</span>')
    })
    $('#text').on('click',function(){
      console.log($('p').text())
      $('p').text('nihao world')
    })
  </script>
</body>

如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

$().val():获取表单用户输入的值,val()中可以更改值
使用attr()可以设置元素的属性,attr接受两个值,第一个值为元素的属性,第二个是属性的值

<head>
  <style>
    .col{
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <input type="text">
  <button id="btn">submit</button>
  <button id="add">add</button>
  
  <script src="jquery-3.2.1.min.js"></script>
  <script>
    $('#btn').on('click',function(){
      console.log($('input').val())
      $('input').val('')
    })
    $('#add').on('click',function(){
      $('input').attr('class','col')
    })

  </script>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 题目1: jQuery 能做什么? 选择网页元素改变结果集元素的操作:取值和赋值元素的操作:移动元素的操作:复制、...
    QQQQQCY阅读 199评论 0 1
  • 问答 1. 说说库和框架的区别? 库是将代码集合成的一个产品,面向对象的代码组织形式而成的库也叫类库。面向过程的代...
    爱上帘外修竹阅读 315评论 0 1
  • 库和框架的区别? Library和framework最大的区别是: inversion of control. 也...
    mianmiani阅读 299评论 0 0
  • 1、 jQuery 能做什么? jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如j...
    zh_yang阅读 1,423评论 6 13
  • 一、选择网页元素 jQuery的基本设计思想和主要用法,就是“选择某个网页元素,然后对其进行某种操作”使用JQue...
    qqqc阅读 321评论 0 1