JQuery点滴积累

最新推荐文章于 2021-02-22 06:09:37 发布

greatverve

最新推荐文章于 2021-02-22 06:09:37 发布

阅读量464

点赞数

分类专栏： JS.JQuery 文章标签： jquery html function 文档 javascript input

本文链接：https://blog.csdn.net/greatverve/article/details/3235659

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。

jQuery API
1.核心，提供常用的方法和属性。比如each(),size(),length
$("img").get().reverse();这里直接对dom操作而不是操作jQuery
2.选择器，找到子元素，父元素，前一个，下一个。
$("tr.eq(1)")
3.属性，比如html(),text(),addClass(),removeClass()
4.筛选，find(),next()
5.文档处理，append()
6.css,$("p").height();
7.事件，ready(),hover()
8.效果，show(),hide(),slideUp(),slideDown()
9.Ajax
10,工具，jQuery.browser.version

基本函数

1.insertAfter

$(function(){
        var oNewP=$("<p>一个段落</p>");
        oNewP.insertAfter("#myTarget");
    });

//概述
1.访问页面框架的局部
访问结点
2.修改页面的表现(Presentation)
控件css,避免判断浏览器.
3.更改页面的内容
强大的api,文本,图片,表单.
4.响应事件
5.为页面添加动画
可自定义参数的动画效果
6.与服务器异步交互
7.简化常用的JavaScript操作
8.window.onload同时调用会混乱.jquery解决了这个问题.

081201

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
eq返回的是jquery对象，而get (n)和索引返回的是dom元素对象。
获取第三个< div>元素的内容。有如下两种方法：
$("div").eq(2).html();?//调用jquery对象的方法
$("div").get(2).innerHTML;?//调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html();?//返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>");?
//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();?//返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new content</b>");?
//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>

$("#msg").height();?//返回id为msg的元素的高度
$("#msg").height("300");?//将id为msg的元素的高度设为300
$("#msg").width();?//返回id为msg的元素的宽度
$("#msg").width("300");?//将id为msg的元素的宽度设为300

$("input").val(");?//返回表单输入框的value值
$("input").val("test");?//将表单输入框的value值设为test

$("#msg").click();?//触发id为msg的元素的单击事件
$("#msg").click(fn);?//为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

应用小实例

 
 <!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>
    <title>练习常用操作</title>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script type="text/javascript">
        $(function(){
            var mystr = "<div style='color:Red;'>hello world</div>";
            $("#d1").html(mystr);//当作html代码
            //$("#d1").click(fc);
            $("#d2").text(mystr);//当作文本
            $("#i1").val('hello');//设置内容
            var ii1=$("#i1").val('');
            $("#d2").text(ii1.val(''));
            $("#i1").click();//触发事件
        });
        function fc(id){
            var i1=$("#i1").val('');
            alert(i1);
        }
    </script>
</head>
<body>
<div id="d1"></div>
<input type="text" onclick='fc(this)' id="i1" />
<div id="d2"></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>
    <title>练习常用操作</title>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script type="text/javascript">
        $(function(){
            var mystr = "<div style='color:Red;'>hello world</div>";
            $("#d1").html(mystr);//当作html代码
            //$("#d1").click(fc);
            $("#d2").text(mystr);//当作文本
            $("#i1").val('hello');//设置内容
            $("#d2").text($("#i1").val());
            //$("#i1").click();//触发事件
        });
        function fc(id){
            var i1=$("#i1").val();
            alert(i1);
        }
    </script>
</head>
<body>
<div id="d1"></div>
<input type="text" onclick='fc(this)' id="i1" />
<div id="d2"></div>
</body>
</html>

greatverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery点滴积累

XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。jQuery API1.核心，提供常用的方法和属性。比如each(),size(),length $("img").get().reverse();这里直接对dom操作而不是操作jQuery2.选择器，找到子元素，父元素，前一个，下一个。 $("tr.eq(1)")3.属性，比如h
复制链接

扫一扫