初步学习jquery学习笔记（一）

什么是jquery？

Jquery是javascript的一个函数库包含以下功能:

html元素选取
html元素的操作
css操作
html事件的函数
javacript的特效
html的遍历和修改
ajex

jquery的引用

使用jquery的两种方法

下载对应的jQuery库，从jquery.com进行下载

<head> <script src="jquery-1.10.2.min.js"></script> </head>

2.使用CNN

百度

<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>

又拍

<head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head>

新浪

<head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>

谷歌

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>

微软

<head> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>

jQuery基本语法

jquery语法是通过选取html元素，并对其进行选取元素执行某些操作

基础语法:$(selector).action()

美元符号定义jquery
selector选择符查询和查找对应html元素
jquery的action()执行对元素的操作

$(this).hide()-隐藏当前的元素

$("p").hide()-隐藏所有的<p>元素

$("p.test").hide()-隐藏所有class="test"的<p>元素

$("#test").hide()-隐藏所有id="test"的元素

文档就绪事件

$(document).ready(

function(){

//开始书写对应的jQuery代码

}

)

这样写的原因是：

防止文档加载之前运行jQuery代码-在DOM加载完成之后才进行操作

注意:

jQuery入口函数与js入口函数区别

$(document).ready(

    function(){

        //执行代码

    }

)

//或者

$(function(){

    //执行代码

})

//javascript入口函数

window.onload=function(){

    //执行代码

}

	window.onload	$(doucument).read()
执行时机	必须等待网页全部加载完毕，包括图片等	只需要等待网页中dom结构加载完毕，就可以执行包裹代码
执行次数	只能执行一次，如果执行两次，那么第一次执行会全部覆盖	可以执行多次，第n次都不会被上一次覆盖
简写方案	无	$(function(){});

Jquery选择器

jQuery选择器允许对html元素
jQuery选择器基于元素id、类、属性、属性值等进行查找html元素，它基于已经存在的css选择器。除此之外，它还有一个自定义的选择器。
jQuery中所有的选择器都是通过美元符号开头$()

元素选择器

<html>

    <head>

        <title>

            初始化jQuery

        </title>

        <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">

        </script>

        <script>

            $(document).ready(function(){

                $("button").click(

                    function(){

                        $("p").hide();

                    }

                )

            })

        </script>

    </head>

    <body>

            <h2>这是一个标题</h2>

            <p>这是一个段落。</p>

            <p>这是另一个段落。</p>

            <button>点我</button>

    </body>

</html>

#id选择器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">

</script>

<script>

$(document).ready(function(){

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

$("#test").hide();

});

});

</script>

</head>

<body>

<h2>这是一个标题</h2>

<p>这是一个段落</p>

<p id="test">这是另外一个段落，id为test</p>

<button>点一下我</button>

</body>

</html>

class选择器

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

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

$(".test").hide();

});

});

</script>

</head>

<body>

<h2 class="test">这是一个标题</h2>

<p class="test">这是一个段落。</p>

<p>这是另外一个段落。</p>

<button>点我</button>

</body>

</html>

其他例子

$("*")	选择所有的元素
$(this)	选择当前html元素
$("p.intro")	选择class为intro的p标签
$("p:first")	选择第一个<p>元素
$("ul li:first")	选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child")	选取每个<ul>元素的第一个<li>元素
$("[href]")	选取带有href属性的元素
$("a[target="_blank"]")	选取所有target属性值等于"_blank"的<a>元素
$("a[target!='_blank']")	选取所有属性值不等于'_blank'的<a>元素
$("tr:even")	选取偶数位置的<tr>元素
$("tr:odd")	选取奇数位置的 <tr>元素

巴特西

初步学习jquery学习笔记（一）

最新文章

热门文章