您的位置：首页 > Web前端 > JQuery

jQuery基本操作

2016-04-24 23:43 585 查看
jQuery简介　　jQuery是一个兼容多浏览器的javascript库，极大地简化了 JavaScript 编程,核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。jQuery 库特性：1、选择器
<div class="dd"></div>
<div id="demo">
<p>Hello Word</p>
</div>
基本选择器　　1、id选择器
$("#demo") 　　//选取 id="demo" 的元素
　　2、标签选择器
$("p") 　　　　　//选取所有 <p> 元素
　　3、class选择器
$(".dd") 　　 　  //选取所有 class="dd" 的元素
　　4、*
$("*")　　　　　 //匹配所有元素
其他
$(".dd,#demo,p")     //匹配多个元素

$("#demo p")　 //匹配id="demo" 下的 p 元素
基本筛选器
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$("li:first")　　　//获取第一个元素
$("li:last ")　     //获取最后一个元素

$("li:eq(1)")　　//获取索引值为1的元素　　
$("li:gt(1)")       //获取大于该索引的元素
$("li:lt(1)")        //获取大于该索引的元素

$("li:even")　　//匹配所有索引值为偶数的元素，从 0 开始计数
$("li:odd　")     //匹配奇数
属性　　1、[attribute]　　　　$("div[id]");　　查找所有含有id属性的div元素　　2、[attribute=value]
<input type="checkbox" name="checkname" value="name1" />
<input type="checkbox" name="checkname" value="name2" />
<input type="checkbox" name="demo" value="name3" />
　　　　$("input[name='checkname']");　　查找所有 name 属性是 checkname 的 input 元素　　3、[attribute!=value]　　不等于　　4、[attribute^=value]　　　　　　　　$("input[name^='news']")　　　　查找所有 name 以 'news' 开始的 input 元素　　　　[attribute$=value]　　　　以什么结尾　　　　[attribute*=value]　　　　包含某些值表单　　1、$(":input")　　查找所有input标签　　2、$(":text")　　查找所有input下type=text的标签（ 等于$("input[type='text']") ）　　:password　　:radio　　:checkbox　　:submit　　:image　　:reset　　:button　　:file　　同上　　2、筛选（过滤、查找）
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
过滤（常用）：
　
　　1、$("
li
").
first()
　　　　　 获取第一个元素　　2、$("
li
").last()　　　　　　 获取最后一个元素　　3、$("
li
").eq(1)　　　　　　 根据索引获取　　4、$(this).hasClass("demo") 查看是否有class=demo的元素，返回true或false
　　5、map（callback）
<script>//map会循环多个标签中的每一个标签，每一个标签被循环时都会执行map内部的函数并获取返回值，//并将所有返回值封装到一个数组中返回var list=$("li").siblings().map(function(){return $(this).text();//this这里就是当前循环标签});</script>
查找（常用）：　　1、children()
　　　　$("div").children()　　 　　查
找DIV中的每个子元素　　2、find()　　　　
$("p").find("span")　　 　　从p下面的所有元素中去找span标签
　　3、next()　　　　　　　   　　　下一个元素　　4、nextAll()　　　　　　　　　　当前元素之后的所有同级别元素　　5、nextUntil()　　　　　　　　  查找什么之后 直到 什么之前的元素　　　　
$("#term-1").nextUntil("#term-2").css("color", "green");　　给#term-1后面直到"#term-2前的元素加上红色背景
<dl><dt id="term-1">term 1</dt><dd>definition 1-a</dd><dd>definition 1-b</dd><dd>definition 1-c</dd><dt id="term-2">term 2</dt><dd>definition 2-a</dd><dd>definition 2-b</dd></dl>
　　6、prev()、prevall()、prevUntil()　　往上找、类似next　　7、parent()　　查找父元素　　parents() 　　查找所有祖先  　　parentsUntil()　　一直找祖先，直到找到规定元素为止　　8、siblings()　　　　查找所有兄弟姐妹的元素3、属性css
addClass()　　　　　　　　//为每个匹配的元素添加类名removeClass()　　　　　　//为每个匹配的元素删除指定类toggleClass()　　　　　　 //如果存在就删除这个类，不存在就添加这个类
HTML代码/文本/值　　html()
$('p').html();　　　　//获取p元素的内容$("p").html("Hello <b>world</b>!");　　//设置p元素的内容
　　text()
$('p').text();　　　　//获取p元素的文本内容（只获取文本）$("p").text("Hello world!");　　//设置p元素的文本内容
　　val()　
$("input").val();　　//获取文本框中的值$("input").val("hello world!");　　//设置文本框中的值
属性　　attr()　　　　设置或返回被选元素的属性值。
$("img").attr("src");    //获取所有图像的src属性值。$("img").attr("src","test.jpg");    //设置属性
　　removeAttr(name)　　删除一个属性
$("img").removeAttr("src");    //删除src属性
　　prop()
$("input[type='checkbox']").prop("checked");    //选中复选框为true，没选中为false
<html><head lang="en"><meta charset="UTF-8"><title></title></head><body><div style="border: 1px solid #ddd;width: 600px;position: absolute;"><div id="title" style="background-color: black;height: 40px;color: white;">标题</div><div style="height: 300px;">内容</div></div><script type="text/javascript" src="jquery-2.2.3.js"></script><script>$(function(){// 页面加载完成之后自动执行$('#title').mouseover(function(){$(this).css('cursor','move');}).mousedown(function(e){//console.log($(this).offset());var _event = e || window.event;// 原始鼠标横纵坐标位置var ord_x = _event.clientX;var ord_y = _event.clientY;var parent_left = $(this).parent().offset().left;var parent_top = $(this).parent().offset().top;$(this).bind('mousemove', function(e){var _new_event = e || window.event;var new_x = _new_event.clientX;var new_y = _new_event.clientY;var x = parent_left + (new_x - ord_x);var y = parent_top + (new_y - ord_y);$(this).parent().css('left',x+'px');$(this).parent().css('top',y+'px');})}).mouseup(function(){$(this).unbind('mousemove');});})</script></body></html>
拖动面板实例图片轮播：http://bxslider.com更多图标：http://fontawesome.io更多相关：http://www.php100.com/manual/jquery/
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航