jquery简单学习

一、使用需求

  要使用jquery要有jquery的文件,没有得去下,自行百度。

二.导入文件

  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>这里是导入jquery,里面的src为文件路径,文件在哪就填哪。

三、程序入口写法

  <script typr="text/javascript">

    $ ( function (){     ← ps:这句就是入口

      所有代码都写在这里

    });

  </script>

四、工厂函数

  $() 这就是一个工厂函数,返回的是一个jquery对像,括号里面叫表达式

五、选择器

  如果你要精确某个标签或某个id某个class就要用到选择器

   标签名选择器:用HTML标签名作选择器 ,

           写法: $("标签名") ,如div标签:$("div")  

           注意:这里会获取所有相同的标签,改变会全部改变

  id选择器:用id作选择器

         写法: $("#id名") , 如id名为a:$("#a")  

         注意:这里如果有相同名字的id,会获取第一个id,之后的后不会获取

  class选择器:用class作选择器

         写法: $(".class名"),  如class名为b:$(".b")   

         注意:这里会获取所有相同的class名,改变会全部改变

  多个选择器:只要写上选择器名字然后用逗号隔开 ,

        写法:如上面的所有选择器: $("div,#a,.c")

        注意:这里只写三个,还可以更多

    后代选择器:用一个元素的所有后代元素作选择器

        写法:$("a b"), a是一个元素,b是其后代元素,中间用空格隔开 ,如form下的input:$("form input")

        注意:只要在a元素的标签里面,不管b元素的层次是多少都会获取

             说白了不管是儿子还是孙子还是孙孙孙子,只要相同名字都会获取到

  子选择器:一个元素的子元素作选择器

       写法:$("a>b"), a是父元素,b是其子元素,中间用>隔开 ,如form下的input:$("form>input")

       注意:这只会获取父元素下的相同名字的子元素,其他名字的子元素获取不到

          说白了就是只能获取相同名字儿子,获取不到名字不同的其他儿子或孙子

  紧邻同辈选择器:这个我自己好难说明,说白了就是同一个爸爸,有儿子,老大下面肯定是老二,用老二作选择器        

          

  相邻同辈选择器:这个也有点难说,说白了就是同一个爸爸,有儿子,只要和老大同辈分且在它后面就会获取

             

六、常见事件

  写法:$(function(){

       $("#a").事件名(function(){

         发生事件要做什么(写代码)

       });

     });

  如点击弹出消息框

  

  常见事件

  click:鼠标点击事件

  ready:网页加载完成事件

  dblclick:鼠标双击事件

  focus:获得焦点事件

  blur:失去焦点事件

  mouseover:鼠标悬停在上面事件

  mouseout:鼠标离开事件

  keydown:键盘按事件

  keypress:键盘按下并松开事件

  keyup:键盘松开事件

  change:文本内容改变事件

  还有一些事件,自行百度

七、常见jquery方法

  写法:$(function(){

       $("#a").事件名(function(){

         $("#a").方法名();

       });

     });

  如获取文本内容并弹出显示

  

  常见方法

  text():获取文本内容

     如id为a的文本内容:$("#a").text();

     还可以设置文本内容,设置为aa:$("#a").text("aa");

  val():获取值value

     如id为a的值:$("#a").val();

     还可以设置值,设置为aa:$("#a").val("aa");

  thml():获取整个标签

     如id为a的里面的标签:$("#a").html();

     还可以设置id为a的a标签内容,原本为 <div id="a"><a href="#">test</a></div>

     设置为:$("#a").html("<a href=‘http://www.163.com‘>网易</a>");

  css():获取css属性

     如id为a的css背景颜色:$("#a").css("backgroundColor");

     还可以设置为红色:$("#a").css("backgroundColor","#f00");

     css的设置都为 css("属性名","值");

八、包装集

  什么是包装集?  就是一个变量里面存放了多个对象的变量就是包装集;

  用法:对象名.方法名()

  length:用来返回一个变量的长度值  注意这是没有括号的

       如一个字符串"aaaa","aaaa".length 就会返回4的整数

       如变量aa存放3个对象,aa.length 就会返回一个3的整数

  index():返回对象的包装集下标,获取的对象集也都是DOM对对象,它们没有jquery的方法,注意转换

      写法:包装集.index(包装集的一个对象),注意index(int)并不会返回对应的对象

      如包装集为aa,里面的对象a,aa.index(a),会返回这个a对象所在的下标

      DOM对象转化为jquery对象,只需要加上$()这个

      如 $(aa[1]) 这样会把第二个元素转化为jquery对象,就能用jquery方法了

  get():获取包装集里面的对象,用get()或[ ]获取的都是DOM对象

     写法:包装集.get(下标),如:aa.get(2),会获取第二个DOM对象

     [ ]写法:包装集[下标],如:aa[2],会获取第二个DOM对象

  add():添加,添加一个标签

     写法:对象或包装集.add("标签").appendTo(添加到哪里)

     如b对象添加标签a到body里面: b.add("<a href=‘#‘>123</>").appendTo(document.body);

  clone():克隆,克隆一个标签

     写法:对象或标签名.clone().appdendTo(克隆到哪里)

     如标签a克隆到body里面: $("a").clone().appendTo(document.body);

  not():剔除,把not("选择器")里面的选择器剔除掉

     写法:包装集.not("一个,俩个,三个,……").其他方法()

      如4个div,id分别为a,b,c,d,改变其背宽度不要b,c

     $("div").not("#b,#c").css("widtg","200px");

  filert():仅保留 ,把filert("选择器")保留,其它剔除掉

     写法:包装集.filert("一个,俩个,三个,……").其他方法()

     如4个div,id分别为a,b,c,d,改变其背宽度不要a,d

     $("div").filert("#b,#c").css("widtg","200px");

  slice():把slice(开始下标,结束下标)在范围里的选择器保留,其它剔除

      写法:包装集.slice(开始下标,结束下标).其他方法(), 等于开始下标,不等于结束下标

     如长度为4的aa包装集保留中间两个并改变其高度,

     如:aa.silce(1,3).css("height","50px");

  each():遍历,把包装集浏览一个一个的遍历出来,

     写法:包装集.each(funtction(){

       一个一个遍历出来要做什么

     });

      如长度为4的aa包装集遍历了都弹出消息

     aa.each(function(){

       alert("11");

     });

九、ajax

  什是是ajax?   是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术;

  写法

  $(function(){

    $("选择器").事件(function(){

      $.ajax({

        一些操作...;

      })

    });

  });

  ajax常用的七个参数

    url:访问地址,

    type:访问的方法,访问的方法主要有两种‘GET‘或‘POST‘;

    data:传递过去的数据, 传递过去的数据主要有三种,分别是url拼接式,json数组,表单的序列化,

       url拼接:在url哪里加?加数据,如 url:‘A?name=张三‘,这是常量; 变量的 url:‘A?‘+变量,   不推荐

       json:在data:打上花括号,如 data:{name:"张三"} ,这是常量; 变量的 data:{name:变量名},推荐

       序列化:  序列化就是提交的时候把name和值自动转化为  name=值(值是中文就会像乱码)的形式发送过去

           var 变量名 = $("表单选择器或者表单的id").serialize()

           data:变量名,   就行了

    dataType:返回的数据类型,

    success:访问成功执行的函数,

    error:访问失败执行的函数,

    timeout:访问的时间

  ajax的例子

  

时间: 2024-10-19 19:32:07

jquery简单学习的相关文章

$.fn.extend简单学习

(function($){ /** 1. $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法, 那么后面你的每一个jquery实例都可以引用这个方法了.  那么你可以这样子:$("#div").abc();  2.   jQuery为开发插件提拱了两个方法,分别是:  jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法.→

JQuery简单介绍

  1.精准简单的选择对象(dom): $('#element');// 相当于document.getElementById("element") $('.element');//Class $('p');//html标签 $("form > input");//子对象 $("div,span,p.myClass");//同时选择多种对象 $("tr:odd").css("background-color&q

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

Jquery的学习(三)选择器

1.Jquery中最重要的就是选择器了. 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 ①简单选择器. 最简单的也就是最常用的,最常用的一般也是最简单的. 在使用 jQuery 选择器时,我们首先必须使用"$()"函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象.随后,我们就可以对这个获取到的 DOM 节点进行行为操作了. #box { //使用 ID 选择器的 CSS 规则 color

第二十篇 jQuery 初步学习2

jQuery 初步学习2 前言: 老师这里啰嗦一下,因为考虑到一些同学,不太了解WEB前端这门语言.老师就简单的说一下,写前端,需要什么:一台笔记本.一个文本编辑器.就没啦!当然,写这门语言,我们要遵守它的规则,文本的后缀得是html,里面的编写格式当然也要遵守它的规则. 如果有同学没有好的编辑器,写代码很打脑壳,记不住单词等等,老师推荐一个编辑工具:WebStorm .老师用的就是这个来写的前端,版本用的是8.0.3,还是挺好用的. 上节课我们初步学习了jQuery,那么这节课,我们再深入了解

jquery简单案例

昨天写了一篇关于jquery选择器的学习的记录,后边发现关于jquery的学习不能只依靠简单的文档,必须动手写出一些实际的东西,这样会学习的更好,今天呢,就给大家带来利用jquery实现文字和图片提示的效果. jquery文字提示 先看下效果: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>

jQuery简单操作

jQuery简单操作 一:简介 在前端方面一直很小白.只了解一些基本的JS.还不是太熟悉.jQuery也是.用的时候有时候很简单的用法还要去查.系统的学习一下.把常用的记录一下做个备忘.也是笔记.不断更新... 二:常用函数 1.$('#id').remove()--移除id为id的元素. 2.$('#id').empty()-- 移除id为id的元素中的内容. 三:实用插件 1.table中合并相同内容的单元格: a)       内容: //封装的一个JQuery小插件.实现相同内容合并单元

varnish简单学习

操作系统:redhat5.5 前端服务器:varnish cache 2.1.5 监听端口8080 后端服务器:tengine 1.4.6 监听端口80 接着,建立varnish用户以及用户组,并且创建Varnish缓存目录和日志目录:[[email protected] ~]#useradd  -s /sbin/nologin varnish[[email protected] ~]#mkdir /data/varnish/cache[[email protected] ~]#mkdir /d

spring4.0.6最新稳定版新特性学习,简单学习教程(一)

Spring Framework 4.0 学习整理. Spring框架的核心部分就是Ioc容器,而Ioc控制的就是各种Bean,一个Spring项目的水平往往从其XML配置文件内容就能略知一二,很多项目,往往是外包公司的项目,配置文件往往是乱七八糟,抱着能跑就行,不报错就行的态度去写,然后在项目中后期发现各种缺失又去一通乱补,其结果就是,整个文档可读性极差,毫无章法.这也不能怪写这个XML的人,拿着苦逼程序员的工资干着架构师的工作必然是这个结果.为了程序员的幸福,我认为有必要来一套简单快速的官方