jQuery学习笔录1（jQuery学习笔记—选择器(1 准备知识)）

最新推荐文章于 2017-12-02 13:47:46 发布

壁橱里的老王

最新推荐文章于 2017-12-02 13:47:46 发布

阅读量1.9k

点赞数

分类专栏： jQuery 文章标签： jquery javascript input function server html

本文链接：https://blog.csdn.net/jessie_j_wang/article/details/7072853

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一些啰嗦，我是jQuery新手，应该是前台设计方面的新手。所以在我的博客里面所记录的一般都是基础的东西。如有问题，希望大家给予指正。谢谢

之所以要专门的学习jQuery，原因在于，上一次的项目，我负责的模块牵扯到前台页面显示的改动，但是面对JavaScript、jQuery，我束手无策。痛定思痛，我觉得花时间学习一下jQuery也是可以的，学习参考《锋利的Jquery》，这本书真不错，对jQuery感兴趣的同学，可以拿来看看。下面的Demo，则是，我在学习过程中觉得有必要记录的东西。

正题——

1 等待Dom元素加载完毕：

jQuery(document).ready().

2 Javascript 一点东西

1 ：<tr><td></td></tr>,<td>标签一定要写啊，我刚刚忘记写了，还查了好长时间- -||||汗颜

2：JavaScript：通过TagName获取页面上的元素

通过TagName获取页面上的元素，我在VS2005中，document.getElementsByTagName("p")这样是错误的。

要这样子才可以：document.documentElement.getElementsByTagName("p")

但是我百度一下，大家都是这样子写滴~document.getElementsByTagName("p")，为什么我不可以，人品不好吗，有木有，有没有和我遇到同一情况的同学？

3：JavaScript：通过ID获取页面上的元素

var item=document.getElementById("tb");

4 Javascript和Jquery 一个对比的小例子

html代码:

<body>
    <form id="form1" runat="server">
    <div >
    <input type="checkbox" value="1" name="check" checked /><br />
    <input type="checkbox" value="2" name="check" /><br />
    <input type="checkbox" value="3" name="check" checked /><br />
    <input type="button" value="你选中的个数" id="btn"/>
    </div>
    </form>
</body>

Javascript 方法：

var count=0;
var items=document.getElementsByName("check"); //要用什么东西都要先声明成变量，对变量进行操作
for(var i=0;i<items.length;i++)
{
    if(items[i].checked)
    count+=1;
    
}
var btn=document.getElementById("btn");
btn.οnclick=function(){
    alert("个数是"+count);
}

jquery方法如下：

注释部分是我私下、当时,对[name='check']用法的理解

//===========对多选框进行操作，输出选中的多选框的个数
$("#btn").click(function(){
//alert($("input[type='checkbox']:checked").length);
alert($("input[name='check']:checked").length);//jquery的选择器有对id的有对class的也有对标签的，但是没有对name 和 type的，所以要这样表示
})

5 附带一个 CSS 小例

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
     <%-- 先将样式写在style里面，用class属性将元素和样式联系起来。内部样式表--%>
    <style> 
    .demo{  
        color:red;
        font-size:30px; 
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p style="color:Red; font-size:30px;">CSS Demo</p>    <%--这样讲css和html混合在一起 ，不好。分离开--%>
    <p class="demo">CSS Demo1</p>
    </div>
    </form>
</body>
</html>

6 零零碎碎

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="script/jquery-1.3.2.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <p οnclick="demo()">click me!</p>
    <p class="demo">jquery click me!</p>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">  //将js和html分离开
function demo()
{
    alert("click");
}
$(".demo").click(function(){   //这样做把click事件从html中分离出来，css添加样式，jQuery是添加行为
alert("jquery click me!");
})
</script>

壁橱里的老王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery学习笔录1（jQuery学习笔记—选择器(1 准备知识)）

一些啰嗦，我是jQuery新手，应该是前台设计方面的新手。所以在我的博客里面所记录的一般都是基础的东西。如有问题，希望大家给予指正。谢谢之所以要专门的学习jQuery，原因在于，上一次的项目，我负责的模块牵扯到前台页面显示的改动，但是面对JavaScript、jQuery，我束手无策。痛定思痛，我觉得花时间学习一下jQuery也是可以的，学习参考《锋利的Jquery》，这本书真不错，对jQue
复制链接

扫一扫