jq笔记

最新推荐文章于 2022-10-16 10:14:32 发布

weixin_30823833

最新推荐文章于 2022-10-16 10:14:32 发布

阅读量89

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1500418882qqcom/p/9994129.html

版权

1、基础语法

$(selector).action()

$:定义jquery；

selector："查询"和"查找" HTML 元素；

action():执行对此元素的操作

2、文档就绪事件：

$(document).ready(function(){

　　// 开始写 jQuery 代码...

});

简写：

$(function(){

　　// 开始写 jQuery 代码...

});

3、jquery选择器：

所有选择器以美元符号开头：$()

（1）元素选择器：$("p") 选择本页面所有的p元素

html：
        <h2>这是标题</h2>
	<p>1111</p>
	<p>2222</p>
	<button>点我试试</button>

jq:
<script>
	$(function(){
		$("button").click(function(){
			$("p").hide();
		});
	});
</script>

　点击按钮p元素会隐藏

（2）id选择器：$("#id")

html:
<h2>这是标题</h2>
<p id="text">3333</p>

jq:
<script>
    $(function(){
        $("#btn").click(function(){
            $("#text").hide();
        });
    });
    
</script>

点击按钮p元素会隐藏

（3）class选择器：$(".class")

html:
<h2>这是标题</h2>
<p class="text">4444</p>

jq:
<script>
    $(function(){
        $(".btn").click(function(){
            $(".text").hide();
        });
    });
    
</script>

点击按钮p元素会隐藏

其他选择器：

语法	描叙
$("*")	选取所有元素
$(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']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

4、外部引入文件

先引入jquery文件，再引入文件

<head>
　　<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
　　</script>
　　<script src="my_jquery_functions.js"></script>
</head>

转载于:https://www.cnblogs.com/1500418882qqcom/p/9994129.html