1. //jQuery与JavaScript在申明变量的区别:
  2. var $variable = jQuery对象
  3. var variable = DOM对象
  4. $variabl[0] //jQuery对象转换成DOM对象
  5. //拿上面的例子举例,jQuery对象和DOM对象的使用:
  6. $("#i1").html(); //jQuery对象可以使用jQuery的方法
  7. $("#i1")[0].innerHTML; //DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

基本选择器

语法结构

  1. // $(选择器).action(操作)
  2. $('p') // 标签选择器
  3. $('.c1') // 类选择器
  4. $('#d1') // id选择器
  5. $('p.c1') // 找含有c1样式类的p标签
  6. $('p#d1') // 找含有id是d1的p标签
  7. $('#d1,.c1,div') // 组合选择器
  8. $("x y");// x的所有后代y(子子孙孙)
  9. $("x > y");// x的所有儿子y(儿子)
  10. $("x + y")// 找到所有紧挨在x后面的y
  11. $("x ~ y")// x之后所有的兄弟y

筛选器

下一个元素:

  1. 1 $("#id").next(); //筛选出下一个元素
  2. 2 $("#id").nextAll(); //筛选出下面所有的元素
  3. 3 $("#id").nextUntil("#i2"); //筛选出下面所有的元素,找到ID为i2终止

上一个元素:

  1. $("#id").prev(); //筛选出上一个元素
  2. $("#id").prevAll(); //筛选出上面所有的元素
  3. $("#id").prevUntil("#i2"); //筛选出下面所有的元素,找到id为i2终止

父亲元素:

  1. 1 $("#id").parent(); //parent() 方法返回被选元素的直接父元素。
  2. 2 $("#id").parentsAll(); //parentsAll()返回被选元素的所有祖先元素
  3. 3 $("#id").parentsUntil(); //parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。

子元素和同级元素:

  1. $("#id").children(); //所有子元素
  2. $("#id").siblings(); //所有同级元素

查找元素:

  1. $("id").find()

1.表单筛选器

js绑定事件的语法

  1. var
  2. xxxEle = document.getElementBy...
  3. xxxEle.on + 事件名 = function()
  4. {
  5. // 事件代码
  6. }

jQuery绑定事件的语法

第一种语法结构:

  1. $(选择器).事件名(function()
  2. {
  3. // 事件代码
  4. })

第二种语法结构 用处更广

  1. $(选择器).on('事件名', function()
  2. {
  3. // 事件代码
  4. })
  1. //实时监测input内部输入变化
  2. $('input').on('input',function () {
  3. // 获取用户输入的内容
  4. console.log($(this).val())
  5. })
  6. // 如何阻止标签后续的事件
  7. // 方式1
  8. // return false
  9. // 方式2
  10. // e.preventDefault()

文档加载

​ js中

  1. window.onload = function()
  2. {
  3. // 在这里写你的JS代码...
  4. }

jQuery中

  1. $(document).ready(function()
  2. {
  3. // 在这里写你的JS代码...
  4. })
  1. $(function(){
  2. // 你在这里写你的代码
  3. })

上面两种了解即可 我们直接写在body最下方

jQuery方法介绍的更多相关文章

  1. jquery的ajax()函数传值中文乱码解决方法介绍

    jquery的ajax()函数传值中文乱码解决方法介绍,需要的朋友可以参考下 代码如下: $.ajax({ dataType : ‘json', type : ‘POST', url : ‘http: ...

  2. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  3. UploadifyAPI-上传插件属性和方法介绍

    上一篇文章简单的介绍了Uploadify上传插件的使用.但是对于常用的属性和方法并没有说明.授人以鱼不如授人以渔,我决定将常用的属性列举出来,供大伙参考参考.           Uploadify属 ...

  4. 前端 ----jQuery的介绍

    01-jQuery的介绍   1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题 ...

  5. jQuery的介绍

    01-jQuery的介绍   1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题 ...

  6. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  7. [转] HTML5 FormData 方法介绍以及实现文件上传

    XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信.XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式. ...

  8. jQuery的介绍和选择器详解

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...

  9. js与jQuery方法对比

      javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...

随机推荐

  1. 记录sql中统计近五天数据的口径(While+IF)

    话不多说,直接上码↓ IF OBJECT_ID('tempdb..#Table') IS NOT NULL BEGIN DROP TABLE #Table; END; DECLARE @tbRange ...

  2. 【转帖】我以为我对Kafka很了解,直到我看了这篇文章

    我以为我对Kafka很了解,直到我看了这篇文章 2019-08-12 18:05 https://www.sohu.com/a/333235171_463994?spm=smpc.author.fd- ...

  3. [转帖]Xenix — 微软与UNIX的短暂爱恋

    Xenix — 微软与UNIX的短暂爱恋 https://www.linuxdashen.com/xenix-微软与unix的短暂爱恋 原来微软曾经 干过那么牛B的 unix系统. 微软向外宣布Mic ...

  4. SQL SERVER DATENAME函数

    定义: DATENAME函数返回指定日期的指定部分. 语法: DATENAME(datepart,date) 参数: ①datepart 参数可以是下列的值: datepart 缩写 年(Year) ...

  5. 初识WSGI接口

    WSGI WSGI全称为Web Server Gateway Interface,WSGI允许web框架和web服务器分开,可以混合匹配web服务器和web框架,选择一个适合的配对.比如,可以在Gun ...

  6. 【已解决】Field injection is not recommended和Could not autowired. No beans of 'xxx' type found.

    目录 问题 解决办法 备注 问题 在项目中,我们使用Spring的@Autowired注解去引入其他类时有时候阿里的编码规约插件就会提示:"Field injection is not re ...

  7. Centos7:Redis的安装,配置及使用

    安装依赖与环境 yum install gcc-c++ 解压缩redis 编译,进入redis源码目录 make 安装 make install PREFIX=/usr/local/redis 注:P ...

  8. Access to XMLHttpRequest at 'http://localhost:8090/user/getotp' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    ajax跨域请求错误 解决: springboot中: 加注解 @CrossOrigin

  9. ES6基础之——get 与 set

    class Chef{ constructor(food){ this.food = food; thid.dish = []; } //getter get menu(){ return this. ...

  10. Python 之 random模块

    Python中的random模块用于生成随机数.1.random.random()  #用于生成一个0到1的随机浮点数:0<= n < 1.0>>> random.ran ...