首页 > 代码库 > Jquery

Jquery

2024-09-20 03:25:34   213人阅读

---恢复内容开始---

ID选择器

<div id="test">xx</div>

$("#test")   -------->$("#test")[0]　　　　　　　　　　　　//转换为DOM对象

var c=document.getElementById(‘test‘)     ---> $(c)　　　　//转换为jquery

标签选择器：

$(‘div‘)

类class选择器：

$(‘.test‘)

组合选择器

$("div,input")

层级

$(‘form input‘)  form下面所有的input

$(‘form > input‘) from最近的input

筛选器

$("ul:first")  第一个ul

$("ul:eq(n)") 第n个ul

$("ul:last")  最后一个ul

....

属性选择器：
$("input[type=‘text‘]") 获取input下type=text的标签

 

全选、取消、反选案例

技术分享 
<input type="button" value=http://www.mamicode.com/"全选" onclick="SelectAll(this)" />
<input type="button" value=http://www.mamicode.com/"反选" onclick="Unselect(this)" />
<input type="button" value=http://www.mamicode.com/"取消" onclick="Cancel(this)" />



//table>tr*3>td{$}*3  之后按TAB自动生成表格
<table border="1" width="200px">
    <tr>
        <td><input type="checkbox"/></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>

        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td><input type="checkbox"/></td>

        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<script src=http://www.mamicode.com/"jquery.js"></script>
<script>

    function SelectAll() {
        $(‘input[type="checkbox"]‘).prop("checked",true);
    }
    function Cancel() {
        $(‘input[type="checkbox"]‘).prop("checked",false);
    }
    function Unselect() {
        $(‘input[type="checkbox"]‘).each(function () {

            $(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true);

//            var t=$(this).prop("checked");  //方式二
//            if(t){$(this).prop("checked",false)}else {$(this).prop("checked",true)}
        });
    }
</script>
View Code

筛选器：

next   获取下一个元素

nextAll   nextUtil

prev　　获取上一个元素

prevAll  prevUtil

parent()　　获取父元素

children()　　获取所有子元素

siblings()　　获取兄弟元素

 

 

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .info{
            width: 400px;
        }
        .header{
            /*height: 34px;*/
            cursor: pointer;
            background-color: aqua;
        }
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div class="info">
        <div class="item">
            <div class="header">菜单一</div>
            <div class="content">内容一</div>
            <div class="content">内容一</div>
            <div class="content">内容一</div>
        </div>
        <div class="item">
            <div class="header">菜单二</div>
            <div class="content">内容二</div>
            <div class="content">内容二</div>
            <div class="content">内容二</div>
        </div>
        <div class="item">
            <div class="header">菜单三</div>
            <div class="content">内容三</div>
            <div class="content">内容三</div>
            <div class="content">内容三</div>
        </div>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    $(".header").click(function(){
        $(this).nextAll().css("display","block");
        $(this).parent(‘.item‘).siblings(‘.item‘).children(‘.content‘).css("display","none");
    });
    </script>
</body>
</html>
菜单

动画：

<img  src="http://www.mamicode.com/x.jpg" style="display:none">xxx</img>

$("img").show(1000);   //将display显示，后面括号里面时间

$("img").hide(1000);

$("img").toggle("slow");

$("img").fadeIn(1000); 淡入

$("img").fadeOut(1000);淡出

$("img").slideToggle(1000); 如果是隐藏的就显示，如果是显示的就隐藏

 

 

样式操作：

$("#xxx").css("display",none);

addClass(); 添加样式

removeClass()；删除样式

hasClass()； 判断是否有样式

 

文本操作：

$("xxx").text() //获取文本信息，或者设置文本信息

$("xxx").val()   input系列框里面的值

 

属性操作：

$("xxx").attr("","")  //赋值

$("xxx").attr(""); //取值

 

---恢复内容结束---

Jquery


联系
我们