jQuery基础

Posted ysdong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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基础的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段