Jquery入门
1.在jquery中$就是jQuery的一个简写形式，$（“#foo”）和Jquery（“#foo”）是等价的，2.
$(document).ready(function () {
// 语句
});
等价于$(function(){
//语句
})
3.
<option value='1068'>mall</option>
.value 取的是1068
.text是mall
4.
DOM(Document Object Model)文档对象模型
HTML可描述为一颗dom树
5.
$("#foo").html() 这段代码等价于
document.getElementbyId("foo").innerHTML
6.选择器中含有"." "#" "(" 或"]"等特殊字符需要进行转义
例如 HTML代码如下:
<div id ="id#b">bb</div>
<div id = "id">cc</div>
如果按照普通方式来获取，例如：
$('#id#b'); $('#id')
以上代码不能正确获取到元素，正确的写法如下：
$('#id\\#b') 转义特殊字符# $('#id\\') 转义特殊字符[]
------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
<p1>点我不会消失。</p1>
<p>点我消失!</p>
<p>点我也消失!</p>
$("p")和<p>是对应的
------------------------------------------------------------------------------------------------------------------------------------------------------------
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
<body>
<button>点我</button>
</body> button是按钮
-----------------------------------------------------------------------------------------------------------------------------------------------------
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
点击点我，这是一个段落和这是另一个段落将会隐藏。
--------------------------------------------------------------------------------------------------------------------------------------------------------
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body> 点击点我，这是一个标题和这是一个段落将会被隐藏
---------------------------------------------------------------------------------------------------------------------------------------------------------
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
点击点我，这是另外一个段落将被隐藏
-----------------------------------------------------------------------------------------------------------------------------------------------------
dblclick() 双击鼠标 mouseenter() 鼠标移到此处触发事件 mouseleave() 鼠标离开触发事件 mousedown()鼠标按下触发 事件
jQuery mouseup()鼠标在段落松开触发 事件
---------------------------------------------------------------------------------------------------------------------------------------------------
使用jQuery val() 方法获取表单的字段值。
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
$("#test").val() 其值为菜鸟教程
----------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery attr() 方法获取属性值。
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("#runoob").attr("href"));
});
});
</script>
<body>
<p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
点击显示href属性的值将会弹出http://www.runoob.com ------------------------------------------------------------------------------------------------------------------
.txt()设置文本 .html（）设置html .val()设置值
--------------------------------------------------------------------------------------------------------------------
jQuery append()
在选取元素的末尾添加内容
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>追加文本</b>。");
});
$("#btn2").click(function(){
$("ol").append("<b>追加列表项</b>");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
点击以后
jQuery prepend()
在选取元素的开头添加内容
jQuery append() -插入多个元素
创新新的 text/HTML 元素, jQuery 和 JavaScript/DOM。添加在新元素文本后。
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。");// 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button οnclick="appendText()">追加文本</button>
</body>
jQuery after() 和 before()
在选取元素的前后添加 HTML元素。<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body> 点击之后
remove（）移除
empty（）
移除选取元素的所有子元素
remove（）使用参数
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有class="italic" 的 p 元素。</button> 点击以后这是另外一个段落会消失
-----------------------------------------------------------------------------------------------------------------
parent（）父元素
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
li父元素会是红色，因为li是span的父节点 下面是find（）的用法
$("div").find("span").css({"color":"red","border":"2px solid red"});
则span将是红色
parents（）则是他的父节点和爷爷节点全部包含进来
parentsUtil( )是直到的意思
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
children()孩子接点
siblings()同胞
next()下一个节点
nextAll（）后面所有的
nextUntil（）直到
------------------------------------------------------------------------------------------------------------------------------------------
页:
[1]