jquery基础知识

1.jquery文件的引入，所有的js代码要写在下面那段代码下面。

  1. <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的，也要在其它引入的jquery文件上面-->

2.写jquery代码的位置

　　和js一样，jquery代码也是写在<script>开始和结束标签之间。

  1. <script type="text/javascript">
  2.  
  3. </script>

jquery选取元素

1.根据id找元素

先在<body>里面写一个<div>

  1. <div id="a1"></div>

（1）用js找，取到的是具体的元素。

  1. var a = document.getElementById("a1");
    alert(a);

（2）用jquery找，取到的是jquery对象。

  1. var b = $("#a1");//用jquery找元素的写法,#也是代表根据id找。
  1. alert(b);
  1. alert(b[0]);//从对象里面取元素

2.根据class找元素

先先在<body>里面写2个<div>

  1. <div class="aa"></div>
  2. <div class="aa"></div>

（1）用js找

  1. var a = document.getElementsByClassName("aa");
  2. alert(a);

（2）用jquery找

  1. var b = $(".aa")
  2. //alert(b);
  3. //alert(b[0]);//取到第一个div
  4. //alert(b[1]);//取到第二个div
  5. alert(b.eq(0));//取jquery对象用eq()，取元素本身用[]。

3.根据标签名取元素

（1）用js找

  1. var a = document.getElementsByTagName("div");

（2）用jquery找

  1. var b = $("div");
    alert(b);

4.根据name取

先先在<body>里面写1个<div>

  1. <div name="cc"></div>

（1）用js找

  1. var a = document.getElementsByName("cc");

（2）用jquery找

  1. var b = $("[name=cc]");//根据属性筛选，只要是属性的，都可以找到。
    //alert(b);
    alert(b[0]);

jquery操作元素

1.操作内容

（1）非表单元素

  1. <div id="a1">11</div>
  1. var a = document.getElementById("a1");
  2. //a.innerText = "hello";
  3. a.innerHTML = "<span style='color:red'>world</span>";

（2）表单元素

  1. <input type="text" id="p1" />
  1. var a = document.getElementById("p1");
  2. a.value="hello";

2.操作元素

（1）非表单元素

　　赋值：

  1. <div id="a1">11</div>
  1. var b = $("#a1");
  2. b.text("aaa")
  3. //b.html("aaa")

　　取值：

  1. var b = $("#a1");
  2. alert(b.text());
  3. //alert(b.html());

（2）表单元素

　　赋值

  1. var b = $("#a1");
  2. b.val("aaa")

　　取值

  1. var b = $("#a1");
  2. b.val();

3.操作属性

　　js操作属性

  1. a.setAttribute("","");
  2. a.setAttribute("");
  3. a.removeAttribute("");

　　jquery操作属性

  1. var b = $("#a1");

  2. b.attr("bs","1");//添加

　b.attr("bs");//获取bs属性的值

　b.removeAttr("bs");//移除bs属性

4.操作样式

（1）js操作样式

　　js不能获取内嵌的属性，只能获取内联的。

  1. a.style.color = red;

（2）jquery操作样式

　　jquery可以获取、设置内嵌的、外部的、内联的样式。

  1. alert(b.css("width"));//获取样式
  1. b.css("font-size","50px");//设置样式

　　隐藏3个div的做法

  1. <style type="text/css">
  2. .aa{ width:100px; height:100px; background-color:#0F0}<!--用内嵌的方式写属性-->
  3. </style>
  1. <div class="aa"></div>
  2. <div class="aa"></div>
  3. <div class="aa"></div>

　　（1）js的写法

  1. var a = document.getElementsByClassName("aa");
  2. for(var i=0;i<a.length;i++)
  3. {
  4.     a[i].style.display = "none";
  5. }

　　（2）jquery的写法

  1. $(".aa").css("display","none");

jquery事件、挂事件、移除事件

  1. <div id="a1">11</div>
  2. <div class="aa" bs="1">aaa</div>
  3. <div class="aa" bs="2">bbb</div>
  4. <div class="aa" bs="3">ccc</div>
  5.  
  6. <input type="text" id="p1" />
  7. <input type="button" id="b1" value="挂事件" />
  8. <input type="button" id="b2" value="移除事件" />
  1. //jquery加事件
  2.  
  3. $(document).ready(function(e) {//页面加载完成之后执行事件
  4.  
  5.         //给a1加点击
  6.         /*$("#a1").click(function(){
  7.             alert('aa');
  8.         })
  9.  
  10.         //给class为aa的所有元素加事件
  11.         $(".aa").click(function(){
  12.             //alert('bb');
  13.             //alert($(this).text());//取文本值。this点击哪一个就选取哪一个
  14.             //alert($(this).attr("bs"));//取属性值
  15.  
  16.             $(".aa").css("background-color","#0F0");//先让所有的颜色变为原来的颜色
  17.             $(this).css("background-color","red");//点击哪一个背景颜色换成红色
  18.         })*/
  19.  
  20.         //第二种方式挂事件
  21.         $("#b1").click(function(){//匿名函数
  22.  
  23.         $("#a1").bind("click",function(){//bind表示挂事件
  24.  
  25.             alert("我是挂上的事件");
  26.  
  27.             })
  28.  
  29.         $("#b2").click(function(){
  30.  
  31.             $("#a1").unbind("click");//unbind移除事件
  32.  
  33.             })
  34.  
  35.         })
  36.  
  37. });

jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件的更多相关文章

  1. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  2. 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

    jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...

  3. 从零开始学 Web 之 jQuery（二）获取和操作元素的属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. jQuery的基础语法实例

    jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

  5. jQuery与JS的区别，以及jQuery的基础语法

    *在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...

  6. javascript 里找元素操作元素

      javascript  一.找到元素. var d = document.getElementById("") var d = document.getElementsByNa ...

  7. react基础语法（一）元素渲染和基础语法规则

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jQuery的基础dom和css操作

    1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...

  9. Python基础语法之文件操作

    1 读文件 1.1 简单读文件 f = open('text', 'r') # f是文件句柄 data = f.read() # read方法可以加整型参数,是几就读几个字符 print(data) ...

随机推荐

  1. iOS开发开辟线程总结--NSThread

    1.简介: 1.1 iOS有三种多线程编程的技术,分别是: 1..NSThread 2.Cocoa NSOperation (iOS多线程编程之NSOperation和NSOperationQueue ...

  2. php mongodb扩展 其他扩展也类似

    MongoDBPHP 扩展 本教程将向大家介绍如何在Linux.window.Mac平台上安装MongoDB扩展. Linux上安装 MongoDB PHP扩展 在终端上安装 你可以在linux中执行 ...

  3. 网卡多ｉｐ 再看ａｒｐ; arp队列也会缓存skb

    [结论] 当协议失效的时候,skb会挂载arp的neigt的一个链表上,然后直接返回了,相当于数据包发下了,当arp收到数据包去修复neigh的目的地址的时候,会把之前所有的neihe中等待的skb全 ...

  4. Ajax在jQuery中的应用（$.ajax()方法）

    Ajax() 方法 $.ajax() 中的参数及使用方法 在jQuery中,$.ajax() 是最底层的方法,也是功能最强的方法.$.get().$.post().$.getScript().getJ ...

  5. 第24天：js-函数变量声明提升

    一.函数声明1.自定义函数function fun1(){ alert("我是自定义函数");}fun2();//函数不调用,自己不执行2.直接量声明var fun2=functi ...

  6. bzoj3992-序列统计

    给出\(n,m,x,S\),其中\(S\subseteq [0,m)\),问有多少个长度为\(n\)的数列\(a\)使得\(a_i\in S\),并且数列中所有元素的乘积mod \(m\)为\(x\) ...

  7. Andorid API Package --->android.animation

    包名: android.animation                                Added in API level 11 URL:http://developer.andr ...

  8. [洛谷P4248][AHOI2013]差异

    题目大意:给一个长度为$n$的字符串,求: $$\sum\limits_{1\leqslant i<j\leqslant n}|suf_i|+|suf_j|-2\times lcp(suf_i, ...

  9. bzoj 3132: 上帝造题的七分钟 （二维树状数组）

    推推公式,最后变成四个东西的前缀和 然后不知道为什么一直wa,数据在本地测是没有错的& 好心的管理员还给了某位p党大神a了的代码,感人肺腑(虽然还是没发现到底我的程序是问题) var f1,f ...

  10. BZOJ4942 & UOJ314：[NOI2017]整数——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4942 http://uoj.ac/problem/314 https://www.luogu.or ...