jQuery基础

jQuery对象和DOM对象

DOM对象为文档对象模型，可以理解为页面上的标签，标签都是DOM元素节点。

jQuery对象通过jQuery包装DOM对象后产生的对象。

jQuery对象都必须加上$，$读为jQuery

以下是一个jQuery导航栏的例子，熟悉下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <title>jQuery Demo</title>
</head>

<script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function () {
        $(".level1 > a").click(function () {
            $(this).addClass("current")   //给当前元素添加"current"样式
        .next().show()                //下一个元素显示
        .parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
        .next().hide();                //它们的下一个元素隐藏
           
        });
    });
</script>

<body>
<!--<script type="text/javascript">
    $(function () {
        alert("5555");
    })
</script>-->
 <div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

衣服导航栏

效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <title>jQuery Demo</title>
</head>
<script type="text/javascript">
    //等待dom元素加载完毕.
    $(function () {
        var $cr = $("#cr");
        $cr.click(function () {
            if ($cr.is(":checked")) {
                alert("感谢支持");
            }
        })
    })

    
</script>
<body>
    <input type="checkbox" id="cr" /><label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

判断勾选框

创建jQuery对象获取ID选择器，var $cr=$("#cr");

jQuery 选择器

写法简洁例如 $("#cr")代替document.getElementById() $("cr")代替document.getElementsByTagName()

jQuery判断元素是否存在用长度判断，因为获取的是对象。

选择器一共有四种：基本选择器，层次选择器，过滤选择器和表单选择器。

基本选择器通过ID，class，标签名查找DOM元素，ID唯一，class可以重复使用。

$("#one").css("background","#bbffaa") 修改背景色，其他类似。

层次选择器根据DOM元素之间的层次关系获取特定元素。

$("body div") $("body >div") 第一个是body下所有div 第二个是body下所有子div

过滤选择器根据特定规则筛选DOM元素。

这部分使用参数可以看网上资料

表单选择器方便获取表单中的数据

jQuery中的DOM操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <title>jQuery Demo</title>
</head>
<script type="text/javascript">
 //<![CDATA[
    $(function () {
        var $a = $("a");//获取a节点
        var a_text = $a.attr("title");//attr获取节点属性
        var $p = $("ul li:eq(2)");//获取li第三个数据
        var p_text = $p.attr("title");
        var p_txt = $p.text();

        alert(a_text);
        alert(p_text);
        alert(p_txt);


    });
  </script>

<body>
    <a title="我最讨厌的水果">我最讨厌的水果？</a>
    <ul>
    <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
     </ul>
</body>
</html>

View Code

以上代码中，实现了查找元素节点和查找属性节点。

创建元素节点
$(html);
根据HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQue对象返回。
例如创建两个<li>元素，作为子节点加入<ul>
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
将两个元素插入文档中。
$("ul").append($li_1);
$("ul").append($li_2);
单个元素要写$("<p></p>")
创建文本节点，属性节点都是类似的。
不论HTML里面的代码多么复杂，创建的方法都是一样的。
插入节点，用的是append方法。
删除节点，使用Remove()方法。
$("ul li:eq(1)").remove(); 删除ul中第二个li元素节点
获取属性和设置属性
获取属性,给attr方法一个参数：var $para=$("p");
var text=$para.attr("title");
设置属性则传递两个值 $("p").attr("title","your title");//设置单个属性的值
$("p").attr({"title":"your title","name":"your name"});
获取样式和设置样式
获取样式同样使用attr方法，class也是元素的属性。设置的方法也一样。
追加样式:addClass().
例如： .another{
font-style:italic;//斜体
color:blue;//字体颜色蓝色
}
$("p").addClass("another");//追加another类
CSS 规定 1.如果一个元素添加了多个class值，合并样式
2.如果有不同的class设置同一样式，则后者覆盖前者。

切换样式

toggle() 控制重复行为

遍历节点

children()看子节点

next()后面紧邻的同辈元素

prev()前面紧邻的同辈元素

siblings()获取所有同辈元素

CSS-DOM操作

获取和设置样式属性

获取样式属性：$("p").css("color");

设置样式属性:$("p").css("color","red");//单个多个的方法和attr一样

设置透明度 $("p").css("opcaity","0.5");//设置半透明

Ajax 异步JS和XML

$.ajsx(options)是jQuery最底层的实现。

 $.ajax({
                    type: "post",
                    url: "../Handler/Demo.ashx",
                    data: { "empno": empno },
                    cache: false,
                    success: function (result) {
                    }
                })

$.ajax()

Cookie存储网页信息

设置Cookie

.cookie(COOKIE_NAME, 'test', { path: '/', expires: 10 });//KEY VALUE OPTIONS 三个参数

获取Cookie

$.cookie(COOKIE_NAME);

posted @ 2019-11-13 11:19 最爱吃汤圆27 阅读(157) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

最爱吃汤圆27

jQuery基础

公告