jquery基础知识

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

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

2.写jquery代码的位置

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

<script type="text/javascript">

</script>

jquery选取元素

1.根据id找元素

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

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

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

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

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

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

2.根据class找元素

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

<div class="aa"></div>

<div class="aa"></div>

（1）用js找

var a = document.getElementsByClassName("aa");

alert(a);

（2）用jquery找

var b = $(".aa")

//alert(b);

//alert(b[0]);//取到第一个div

//alert(b[1]);//取到第二个div

alert(b.eq(0));//取jquery对象用eq()，取元素本身用[]。

3.根据标签名取元素

（1）用js找

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

（2）用jquery找

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

4.根据name取

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

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

（1）用js找

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

（2）用jquery找

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

jquery操作元素

1.操作内容

（1）非表单元素

<div id="a1">11</div>
var a = document.getElementById("a1");

//a.innerText = "hello";

a.innerHTML = "<span style='color:red'>world</span>";

（2）表单元素

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

a.value="hello";

2.操作元素

（1）非表单元素

　　赋值：

<div id="a1">11</div>
var b = $("#a1");

b.text("aaa")

//b.html("aaa")

　　取值：

var b = $("#a1");

alert(b.text());

//alert(b.html());

（2）表单元素

　　赋值

var b = $("#a1");

b.val("aaa")

　　取值

var b = $("#a1");

b.val();

3.操作属性

　　js操作属性

a.setAttribute("","");

a.setAttribute("");

a.removeAttribute("");

　　jquery操作属性

var b = $("#a1");


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

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

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

4.操作样式

（1）js操作样式

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

a.style.color = red;

（2）jquery操作样式

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

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

　　隐藏3个div的做法

<style type="text/css">

.aa{ width:100px; height:100px; background-color:#0F0}<!--用内嵌的方式写属性-->

</style>
<div class="aa"></div>

<div class="aa"></div>

<div class="aa"></div>

　　（1）js的写法

var a = document.getElementsByClassName("aa");

for(var i=0;i<a.length;i++)

{

    a[i].style.display = "none";

}

　　（2）jquery的写法

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

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

<div id="a1">11</div>

<div class="aa" bs="1">aaa</div>

<div class="aa" bs="2">bbb</div>

<div class="aa" bs="3">ccc</div>

<input type="text" id="p1" />

<input type="button" id="b1" value="挂事件" />

<input type="button" id="b2" value="移除事件" />
//jquery加事件

$(document).ready(function(e) {//页面加载完成之后执行事件

        //给a1加点击

        /*$("#a1").click(function(){

            alert('aa');

        })

        //给class为aa的所有元素加事件

        $(".aa").click(function(){

            //alert('bb');

            //alert($(this).text());//取文本值。this点击哪一个就选取哪一个

            //alert($(this).attr("bs"));//取属性值

            $(".aa").css("background-color","#0F0");//先让所有的颜色变为原来的颜色

            $(this).css("background-color","red");//点击哪一个背景颜色换成红色

        })*/

        //第二种方式挂事件

        $("#b1").click(function(){//匿名函数

        $("#a1").bind("click",function(){//bind表示挂事件

            alert("我是挂上的事件");

            })

        $("#b2").click(function(){

            $("#a1").unbind("click");//unbind移除事件

            })

        })

});

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. 向redis插入数据时，返回值问题

    向redis插入数据时,如果redis没有要插入的key,插入成功之后返回值为1 如果redis有这个key,插入成功之后返回值是0

  2. 《剑指offer》---丑数

    本文算法使用python3实现 1. 问题1 1.1 题目描述:   把只包含因子2.3和5的数称作丑数(Ugly Number).判断一个数是否是丑数.   时间限制:1s:空间限制:32768K ...

  3. PokeCats开发者日志（十）

      现在是PokeCats游戏开发的第三十三天的中午,收到了中国版权保护中心软件登记部发来的受理通知书.   上易版权看一眼,貌似离拿证不远了.   想一想还有点小激动呢!

  4. Swagger字段说明

    常用字段说明 字段 说明 schemes 使用协议(如:http.https) host 项目地址,这个地址会作为每个接口的url base,拼接起来一起作为防伪地址 consumes 接口默认接收的 ...

  5. 个人作业4 alpha阶段 个人总结

    一.个人总结 二.回答问题 三.再提问题 Q1:关于第三章过早优化 过早优化:既然软件是"软"的,那么它就有很大的可塑性,可以不断改进.放眼望去,一个复杂的软件似乎很多的模块都可以 ...

  6. exception = {"元数据集合中已存在具有标识“xxx”的项。\r\n参数名: item"}

    vs提示:exception = {"元数据集合中已存在具有标识"xxx"的项.\r\n参数名: item"} 出现这个错误说明有重复的字段,有可能是继承的类里 ...

  7. shell基础练习题讲解

    1037774765 克隆 1.创建一个用户redhat,其ID号为1001,基本组为like(组ID为2002),附近租为linux. groupadd -g 2002 likegroupadd l ...

  8. MVP开发模式的理解

    1.MVP是什么 如果从层次关系来讲,MVP属于Presentation层的设计模式.对于一个UI模块来说,它的所有功能被分割为三个部分,分别通过Model.View和Presenter来承载.Mod ...

  9. ADO.NET中DataSet、DataTable、DataRow的数据复制方法

    DataSet 对象是支持 ADO.NET的断开式.分布式数据方案的核心对象 ,用途非常广泛.我们很多时候需要使用其中的数据,比如取得一个DataTable的数据或者复制另一个DataTabe中的数据 ...

  10. BIO、NIO、AIO通信机制

    一.BIO的理解 首先我们通过通信模型图来熟悉下BIO的服务端通信模型:采用BIO通信模型的服务端,通常由一个独立的Acceptor线程负责监听客户端的连接,它接收到客户端的连接请求之后为每个客户端创 ...