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

jQuery基础语法

$(selector).action()

基本选择器

语法结构

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

筛选器

下一个元素:

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

上一个元素:

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

父亲元素:

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

子元素和同级元素:

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

查找元素:

$("id").find()

1.表单筛选器

js绑定事件的语法

var
xxxEle = document.getElementBy...
xxxEle.on + 事件名 = function()
{
// 事件代码 }

jQuery绑定事件的语法

第一种语法结构:

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

第二种语法结构 用处更广

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

文档加载

​ js中

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

jQuery中

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

上面两种了解即可 我们直接写在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. airflow_failover启动scheduler

    参考: https://github.com/teamclairvoyant/airflow-scheduler-failover-controller 1.stop failover2.stop s ...

  2. oracle -- 查询执行计划,判读查询语句优劣

    以oracle的scott账户:找到员工表中薪水大于本部门平均薪水的员工为例 多表查询方式: select e.empno, e.ename, e.sal, d.avgsal from emp e, ...

  3. Analyzing Polyline -- Codeforces Round #123 (Div. 2)

    题意:https://codeforc.es/problemset/problem/195/D 求折线段数. 思路: 对pos进行sort,对不同区间段加k,两个dp处理不同k>0 or k&l ...

  4. LeetCode面试常见100题( TOP 100 Liked Questions)

    LeetCode面试常见100题( TOP 100 Liked Questions) 置顶 2018年07月16日 11:25:22 lanyu_01 阅读数 9704更多 分类专栏: 面试编程题真题 ...

  5. Eclipse怎么改变@author 姓名

    1 点击windows  然后选择 点击进去选择搜索code Templates  点击选择出现下面的页面 点开comments,里面有给方法,变量 ,类等加注释设置的模板 如:点击Methods  ...

  6. 使用Enablebuffering多次读取Asp Net Core 请求体

    使用Enablebuffering多次读取Asp Net Core 请求体 1 .Net Core 2.X时代 使用EnableRewind倒带 public IActionResult Index( ...

  7. unity ugui image更换图片

    1:利用资源加载方式 using UnityEngine; using System.Collections; using UnityEngine.UI; public class ChangeIma ...

  8. # 风险定性(Qualitative)分析

    1. 从一个给教师打分的设计表说起 我们参加一个培训课程,一般在培训结束之后,培训机构一般都会分发一份培训师培训效果反馈表,用于评价其讲师的培训能力的强弱. 如果是一家没有什么经验的培训机构设计的反馈 ...

  9. 【原创】大叔经验分享(68)maven工程查看jar包依赖

    1 idea 结果 2 maven命令 $ mvn dependency:tree 结果 [INFO] +- org.springframework.boot:spring-boot-starter- ...

  10. 【zhifu】web开发中的支付宝支付和微信支付

    一.支付类型: 支付宝支付: 支付宝app内的网页支付: app外(即普通浏览器)网页支付: 微信支付: 微信app内的支付(在这里叫公众号支付) app外的支付(微信H5支付): 微信公众号的支付宝 ...